Develop Reference

Show shape of transparent image

I need to make a image revealing section on my page.
Here, I can show the just the shape of the transparent image using brightness and then later remove the brightness to reveal the image.
By default i get a black shape using brightness as seen in my snippet. I need to do the same thing but by changing the color for shape. I need to show the shape of the transparent image with a different color, red in my case.
How can I do this using css and/or javascript?
.mask-img{
width:50%;
filter: brightness(0);
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>

Use mix-blend-mode. The coloration and the value of the blend will depend on each case so you need to adjust it based on the image.
.mask-img {
width: 50%;
}
.container {
position:relative;
z-index:0;
background:#fff;
}
.container:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:red;
mix-blend-mode:hue; /* or 'color' to get a different effect */
opacity:1;
transition:0.5s;
}
.container:hover::after {
opacity:0;
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>

First sibling div treated as a background of second dynamic div

HTML Markup,
<div class="bluredBackground"></div>
<div class="content">
Hi This is dynamic content.<br>
If the div height increases then first div height <br>
should be automatically increase.
</div>
I want first div height should automatically increase whenever the second div height increases because of its dynamic content.
As of now, I was able to place one div on top of another,
.content {
width: 70%;
height: auto;
border:1px solid;
position: absolute;
z-index:10;
background-color: white;
}
.bluredBackground {
width:70%;
height:70%;
background-color: red;
z-index:0;
border:1px solid;
position:absolute;
-webkit-filter: blur(2px);
}
How can I solve this problem with CSS?
I was trying this thing > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/
Please help!
Thanks in advance.

This is not a direct answer to question, but what exactly are you planning with the 2nd div (blurred) being on the same height as 1st one?
If you want the fancy red blurred glare behind, then just use box-shadow. Add it to the .content and it will work pretty identical
box-shadow: 0px 0px 4px 0px red;
However, if you definitely need to use the red blurred div, then you cannot solve that with plain CSS. You must use JavaScript and look for class style of one element and copy it to the next one.
Example:
window.onload = () =>
{
const div1 = document.querySelector('.bluredBackground');
const div2 = document.querySelector('.content');
div1.style.height = `${div2.offsetHeight}px`;
}

Is it possible to change :before using javascript or jQuery [duplicate]

This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
fiddle: https://jsfiddle.net/jzhang172/708p96v3/
I'm trying to change the :before background-color using jquery and javascript. From what I've researched, people say it's not possible. How do I change the color of the tint of this image then? If it's possible to do without :before, then that's also fine.
$(function(){
$('.div:before').addClass('wto');
$('.div').css('background-color','orange');
});
.div{
height:500px;
width:500px;
background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
position:Relative;
}
.div:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
background:rgba(22, 255, 171, 0.88);
transition:2s;
}
.div:hover:before{
background:red;
}
body,html{
position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div"></div>

I suppose you want something this:
body,html { position: Relative;}
.div {
height: 500px;
width: 500px;
background: url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
position: Relative;
}
.div:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
background: rgba(22, 255, 171, 0.88);
transition: 2s;
}
/***********check this block**********************/
.div:hover:before {
background: rgba(255, 0, 0, 0.88);
transition: 2s;
}
/*************************************************/
<div class="div"></div>

I came across one dirty trick. May be this might do your work.
$(function(){
$('#changeColor').click(function(){
html = "<style>.div:before{background:rgba(22, 255, 171, 0.75) !important;}</style>"
$('.div').append(html);
});
});
.div{
height:500px;
width:500px;
background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
position:Relative;
}
.div:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
background:rgba(0, 0, 0, 0.75);
transition:2s;
}
body,html{
position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Change
<div class="div"> </div>

If I understand your question correctly, you're explicitly asking how you could do this with javascript.
To my knowledge, there is no way you can affect the pseudo-elements with javascript.
But again, if I'm not mistaken you don't care about pseudo-elements, you just want to colorize an image and change that color on :hover. That actually is possible, it's a bit complicated though, so I can't give you a solution here, just some pointers:
Option one: CSS filters and SVG
Did you know CSS had a filter property that lets you do things like adding blur or changing contrast? Here's a nice overview with examples.
With that property, you can also load a SVG filter and apply that filter to your element, image in your case and probably in most others. SVG filters let you specify a color matrix that can be used to colorized images, actually the CSS filter property already has one SVG filter built in, to colorize images sepia.
So here is a Tutorial about colorizing greyscale images. With a bit of trial and error I think you can build your own color matrix to do the same with color images (especially since they also explain how the sepia matrix works).
Be aware this method has its limits though.
Option two: Javascript magic
I won't write much about these since I found two posts on SO that tell you everything you need to know:
You could either write your own code to colorize the images or use a jQuery plugin to achieve that effect.

Since your Div takes a background-image, I would change the value of background-color in Div instead and give :before's background-color a value of inherit.
.div
{
background-color: rgba(22, 255, 171, 0.88);
}
.div:before
{
background-color: inherit;
}
To change the background-color of Div:before:
Div.style['background-color'] = 'rgba(0, 255, 255, 0.88)';

dygraphs change values/legend background

I'm using dygraphs on a dark background and can't seem to get the background on the legends/values to be transparent.
CSS I've tried:
.dygraph-legend {
background:none;
}
and
.dygraph-legend {
background-color: transparent;
}
I can't find a way to make this transparent.
Link to an image of the problem: here

dygraphs sets some inline styles on the legend <div>. To override them, you need to use !important:
.dygraph-legend {
background: transparent !important;
}

Add another div right after the dyGraphs div and tell the graph to use this div for labels and style the labels div with the !important annotation. E.g.:
CSS:
.dyStatsLegend {
color: silver !important;
background: rgba( 255, 255, 255, 0.1 ) !important;
}
HTML:
<div id="dyGraphHumTemp" class="dyStatsDiv"></div>
<div id="dyGraphHumTempLabels" class="dyStatsLegend"></div>
JavaScript:
var g1 = new Dygraph(
document.getElementById("dyGraphHumTemp"),
data,{
labelsDiv: 'dyGraphHumTempLabels'
});

Change color by scrolling

This example seems like to change red color into blue from bottom. But, I want to change the red color into blue from top position by scrolling. Could you show me the good solution? It's okay if there are using javascript.
Here is another example what I want to. When you scroll down at this site, the gray line change into red.
<div id="scroll1"></div>
<div id="scroll2"></div>
Css part
#scroll1 {
background-color: red;
width: 50px;
height: 800px;
}
#scroll2 {
bacground-color: blue;
width: 50px;
height: 800px;
}

#scroll1{
background-color:blue;
width: 50px;
height:800px
}
#scroll2{
background-color:red;
width: 50px;
height:800px
}
According to approach used in example, this can be done by css. Just replace color.

When you say scroll do you mean a gradual fade into the other color? Or do you want the change to happen instantly?
Either way you are going to be faced with javascript as CSS is quite limited when it comes to feature-rich UI.

If you want to gradually change your colour you don't need two divs.
Create one div but with a gradient colour as the background-color.
The gradient is from red to blue, so when you scroll you don't need to change you CSS/JavaScript because the gradient will be different.
Look at my example on JSFiddle.

Check this out . I guess this is what you want.
html
<html>
<head></head>
<body>
<div id="contents"> </div>
<div id="container"></div>
</body>
</html>
style sheet
#container{
width:5px;
height:400px;
background-color: red;
Position:absolute;
border:1px #000 solid;
}
#contents{
width:5px;
height:400px;
position:fixed;
background-color: white;
border:1px #000 solid;
}
jquery script
$(document).ready(function(){
$("body").height(1000);
$(window).scroll(function() {
var newSize = $("#contents").height() * (1 - $(window).scrollTop() / ($(document).height() - $(window).height()));
$("#container").animate({height:newSize+"px"},500);
});
});
the demo is available here DEMO