All Collections
Style
Adjusting images to appear only on hover
Adjusting images to appear only on hover
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

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

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.

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.

Did this answer your question?