Showing a graphic only on hover can easily be accomplished through a css class.  Let’s learn how.

How To:

1. Add this style sheet to your current project

//hapyak_demos.s3.amazonaws.com/css/customer/on_hover_img.css

Or add this css to your current sheet:

.popcorn-image:not(.hapyak-editing-image) img {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.popcorn-image:not(.hapyak-editing-image).popcorn-image:hover img {
  opacity: 1;
}

2. Images will now fade in on mouse hover

Make it yours:

To change how fast images fades in, simply change 0.5s to any number you wish.

Did this answer your question?