在CSS3缓入过渡中的：hover上显示Div叠加

Question

I've got the overlay working on :hover. However I'd like to add an ease-in transition using CSS3. Can't seem to find a working version online.

To the code!

So I have a div which contains just an image. When I hover over it, it displays a coloured overlay with 2 text elements.

<div class="item">
     <img src="assets/images/blah.jpg" class="image">
         <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
              <h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4>
            </div>
         </a>
</div>

For my CSS, I have added the -transition code:

.item {
  position: relative;
  background-color: white;
  -webkit-transition: background-color 2s ease-in; 
  transition: background-color 2s ease-in; 
}

.overlay {
  background: white;
  position: absolute;
  display: none;
 }

.item:hover .overlay{
   display:block;
   background-color: black;
}

However this transition effect it isn't working! Please help!

Do I need to change the -transition to use display or all ?

I have a jsfiddle which has the :hover working , just without the animation.

Much appreciated

Link: https://jsfiddle.net/jonahmclachlan/nwhzLu1g/2/

Answer 1

You must to change the display with an opacity for example, and add the transition to the overlay, not the item.

See it working:

 .item { position: relative; background-color: white; } .overlay { background: white; position: absolute; opacity: 0; -webkit-transition: background-color 2s ease-in, opacity 2s ease-in; transition: background-color 2s ease-in, opacity 2s ease-in; } .item:hover .overlay{ background-color: black; opacity: 1; -webkit-transition: background-color 2s ease-in, opacity 2s ease-in; transition: background-color 2s ease-in, opacity 2s ease-in; } 

 <div class="item"> <img src="assets/images/blah.jpg" class="image"> <a class="overlay" href="#"> <h3 class="title">Some title</h3> <div class="description"> <h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4> </div> </a> </div>