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.