I am doing a transition
where it fades into transparent white, when a user is hovering an image.
My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding background:black;
to the class that contains the transition
, but it does not work unfurtunately, it's still fading into white transparent.
The css code I am using is:
.hover:hover { opacity: 0.2; } .item-fade { background: black; opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
<p>Hover image, the white opacity needs to be black :/</p> <img src="//placehold.it/100x100" class="hover item-fade" />
Opacity values between 0 and 1, such as 0.2, 0.4, 0.6, etc., change an image from transparent to opaque by gradually increasing the decimal value. The numeric value must be between 0 and 1 to make the image semi-transparent.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in.
Wrap your image with a span
element with a black background.
.img-wrapper { display: inline-block; background: #000; } .item-fade { vertical-align: top; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; opacity: 1; } .item-fade:hover { opacity: 0.2; }
<span class="img-wrapper"> <img class="item-fade" src="https://via.placeholder.com/100x100/cf5" /> </span>
It's not fading to "black transparent" or "white transparent". It's just showing whatever color is "behind" the image, which is not the image's background color - that color is completely hidden by the image.
If you want to fade to black(ish), you'll need a black container around the image. Something like:
.ctr { margin: 0; padding: 0; background-color: black; display: inline-block; }
and
<div class="ctr"><img ... /></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With