Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css transition opacity fade background

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" />
like image 284
simon Avatar asked Jan 15 '14 18:01

simon


People also ask

How do I gradually change opacity in CSS?

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.

How do you animate opacity in CSS?

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.

How do I fade in and fade out in CSS?

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in.


2 Answers

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>
like image 59
Roko C. Buljan Avatar answered Oct 03 '22 04:10

Roko C. Buljan


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> 
like image 20
Paul Roub Avatar answered Oct 03 '22 02:10

Paul Roub