Hover an image fade in and out

Question

I have an image and when you put your mouse over it I have another div that shows. I am trying to get it to fade in and out slower but everything I have tried so far has not worked. Any help would be greatly appreciated. Thanks

.image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;  
}

.overlay {
display: none;
}

.image:hover .overlay { 
box-sizing: border-box; 
display: block; 
height: 100%; 
left: 0; 
-moz-box-sizing: border-box; 
position: absolute;
top: 0;
-webkit-box-sizing: border-box;
width: 100%;   
}

Please provide the markup part as well. – Gildas.Tambo Oct 12 '19 at 19:30 — Gildas.Tambo, Oct 12 '19 at 19:30

symlink · Answer 1 · 2019-10-12T19:23:29.303

0

Set the overlay opacity to 0, then 1 on hover, and add a transition rule:

html, body{
   height: 100%;
   margin: 0;
}

.overlay{
   opacity: 0;
   transition: opacity .6s ease-in;
   height: 100%;
}

.overlay:hover{
   opacity: 1;
}

<div class="overlay">
  <ul>
    <li>facebook</li>
    <li>amazon</li>
  </ul>
</div>

edited Oct 12 '19 at 19:23

answered Oct 12 '19 at 19:10

symlink

11,984
7
29
50

I got rid of the display: none and my hidden div with content shows. – jessie williams Oct 12 '19 at 19:14
Take a look at the site now. Run your mouse over the image. https://www.capebretonstartpage.com/Start/ – jessie williams Oct 12 '19 at 19:15
@jessiewilliamsn I'm not sure what effect on that site you're after, but see this answer: https://stackoverflow.com/questions/3331353/transitions-on-the-display-property. You can't use `transition` with `display: none`. – symlink Oct 12 '19 at 19:19
I am just looking for it to fade in and out slower. Thanks – jessie williams Oct 12 '19 at 19:20
symlink Thank you very much I found it on that link you sent me.. – jessie williams Oct 12 '19 at 19:31

score 0 · Answer 2 · answered Oct 12 '19 at 19:23

You need an transition and opacity:

.image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;  
}

.overlay {
opacity: 0;
transition: 200ms;
}

.image:hover .overlay { 
box-sizing: border-box; 
display: block; 
height: 100%; 
opacity: 1;
left: 0; 
-moz-box-sizing: border-box; 
position: absolute;
top: 0;
-webkit-box-sizing: border-box;
width: 100%;   
}

Hover an image fade in and out

2 Answers2