Fade out only when hover is removed

Question

I have a div which is supposed to appear only on hover. But the animation appears also when I load the page. I want the animated div to be hidden until I hover over the other div. Is there a way to prevent the animation from running when the page is loaded?

Here is the CSS:

#dim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(200, 200, 200, 0.8);
  z-index:100;
  padding: 5%;

  animation: fadeout 1s;
  animation-fill-mode: forwards;
}

#dim:hover{
  animation: fadein 1s;
  animation-fill-mode: forwards; 
}

/* Animations */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

And here is a CodePen: https://codepen.io/Martin36/pen/gWwmZO

Possible duplicate [how-to-prevent-css-keyframe-animation-to-run-on-page-load](http://stackoverflow.com/questions/27938900/how-to-prevent-css-keyframe-animation-to-run-on-page-load) — Asons, Apr 24 '17 at 13:31

score 5 · Accepted Answer · answered Apr 24 '17 at 13:16

5

In stead of keyframes, you could use css transition and give a default opacity of 0 to solve this problem.

#dim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(200, 200, 200, 0.8);
  z-index:100;
  padding: 5%;
  opacity: 0;
  -webkit-transition: opacity 1s; /* Safari */
  transition: opacity 1s;
}

#dim:hover{
  opacity: 1;
}

answered Apr 24 '17 at 13:16

Bram

273
1
10

That is great! Much less code also. Thank you very much. – martin36 Apr 24 '17 at 13:19
Glad I could help you out. Could you mark this post as your final answer? Thanks! You can find more info about css transitions on https://www.w3schools.com/css/css3_transitions.asp. I use them alot. – Bram Apr 24 '17 at 13:24

score 1 · Answer 2 · 2017-04-24T13:21:26.417

div{
  height:100vh;
  width:100vw
}

#dim {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(200, 200, 200, 0.8);
    z-index:100;
    padding: 5%;
    opacity:0 ;
  
  -webkit-transition: opacity 1s; /* Safari */
  transition: opacity 1s;

  
}

#dim:hover{
   opacity: 1;
}

/* Animations */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

<div>
  <div style="background-color:red"></div>
  <div id="dim">
    <h1 class="header">Name of project</h1>
    <div class="description">
      Description of project
    </div>
  </div>
</div>

Check now...

Fade out only when hover is removed

2 Answers2