Created
February 13, 2016 17:35
-
-
Save ericakfranz/ba49608a9d2f13e3753a to your computer and use it in GitHub Desktop.
Fade image out and show title 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 title and hide it by default */ | |
.envira-gallery-item-inner .title { | |
opacity: 0; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
/* Optional: add transitions so the title 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 title on hover */ | |
.envira-gallery-item-inner:hover .title { opacity: 1; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment