Simple effect where when you hover over the image, another image/bit of text/whatever is overlayed
A Pen by Marie Hogebrandt on CodePen.
Created
January 21, 2015 19:10
-
-
Save kucukharf/722c5b4d43d2f4224466 to your computer and use it in GitHub Desktop.
Hover effect
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
| <a> | |
| <img src="http://placehold.it/230x300"> | |
| <!-- the hover effect --> | |
| <div class="shown-when-hover"> | |
| This is visible when hovering over it. | |
| </div> | |
| </a> |
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
| a .shown-when-hover { | |
| /* Display none, overridden when the a is hovered over */ | |
| display: none; | |
| /* Absolute positioning to make it fill out every bit | |
| of the containing link */ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| /* Slightly transparent background so the picture shows */ | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| a:hover .shown-when-hover { | |
| /* display block when the link is being hovered over */ | |
| display: block; | |
| } | |
| a { | |
| /* These three are important for containing the hover */ | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| /* These two are the dimension of the image, to contain | |
| the hover effect*/ | |
| width: 230px; | |
| height: 300px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment