CODEWITHSUNDEEP
htmlcssanimation
Jonah M
Jonah M

Reputation: 115

Display Div Overlay on :hover with CSS3 Ease-In Transitions

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/

Upvotes: 1

Views: 11920

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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>

Upvotes: 5

Related Questions