Skip to content

Instantly share code, notes, and snippets.

@ericakfranz
Last active February 13, 2016 19:01
Show Gist options
  • Save ericakfranz/3cb4c3a900e7359092e1 to your computer and use it in GitHub Desktop.
Save ericakfranz/3cb4c3a900e7359092e1 to your computer and use it in GitHub Desktop.
Position caption over image and show only on hover.
/* 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