Created
February 13, 2016 17:33
-
-
Save ericakfranz/52ea2d0b114a24433d5a to your computer and use it in GitHub Desktop.
Position title over image and show only 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
/* 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