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

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/

`display` is not a transitionable property. You are changing it from `none` to `block` on hover and so it will never transition. — Harry, Feb 19 '16 at 11:22
Thanks guys! That's making sense. I thought display: block was killing it — Jonah M, Feb 19 '16 at 11:47

score 5 · Accepted Answer · answered Feb 19 '16 at 11:25

5

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>

answered Feb 19 '16 at 11:25

Marcos Pérez Gude

21,869
4
38
69

Thanks Marcos, why do I need to declare the -transitions twice? – Jonah M Feb 19 '16 at 11:43
1

The first is to make the transition on mouse leave, and the second is to make the transition on mouseover. IF you remove the first transition, you'll see the transition only on hover, but not when you leave the mouse over. – Marcos Pérez Gude Feb 19 '16 at 11:50
Ah yeah in and out - that looks better actually. – Jonah M Feb 19 '16 at 11:53
Maybe you want to add `visibility: hidden` where after was `display:none`, to avoid the hover on the overlay. – Marcos Pérez Gude Feb 19 '16 at 11:59
@Xsmael yes it's running – Marcos Pérez Gude Aug 13 '18 at 22:30
Alright, yes it is, but the image link is broken and i didnt even try... – Xsmael Aug 13 '18 at 23:17

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

1 Answers1