Created
February 13, 2016 19:00
-
-
Save ericakfranz/86a45e28ab9ab6b0b2db to your computer and use it in GitHub Desktop.
Fade image out and show caption on hover.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Give the gallery item a background color that will show through when the image is faded, modify as desired */ | |
.envira-gallery-item-inner { background-color: #000 !important; } | |
/* The opacity of the image on hover */ | |
.envira-gallery-item-inner img.envira-gallery-image.envira-gallery-image:hover { opacity: 0.5 !important; } | |
/* Position caption and hide it by default */ | |
.envira-gallery-item-inner .caption { | |
opacity: 0; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
/* Optional: add transitions so the caption smoothly fades in/out on hover */ | |
-webkit-transition: opacity 0.5s ease; | |
-moz-transition: opacity 0.5s ease; | |
-o-transition: opacity 0.5s ease; | |
transition: opacity 0.5s ease; | |
} | |
/* Show caption on hover */ | |
.envira-gallery-item-inner:hover .caption { opacity: 1; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment