Author: | hugo |
---|---|
Views Total: | 44,773 views |
Official Page: | Go to website |
Last Update: | August 31, 2014 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 technique to create an animated & transparent overlay covering the image when hovered, which is good for creating compelling image caption hover effects for your gallery/portfolio website. Created by hugo.
How to use it:
Insert an image into your document.
<img class="media__image" src="1.jpg">
Add an overlay with text caption to the image.
<div class="media__body"> <h2>Image Title</h2> <p>Description</p> </div>
The whole markup would be something like this:
<div class="media"><img class="media__image" src="1.jpg"> <div class="media__body"> <h2>Image Title</h2> <p>Description</p> </div> </div>
The required CSS/CSS3 styles.
.media { display: inline-block; position: relative; vertical-align: top; } .media__image { display: block; } .media__body { background: rgba(41, 128, 185, 0.7); bottom: 0; color: white; font-size: 1em; left: 0; opacity: 0; overflow: hidden; padding: 3.75em 3em; position: absolute; text-align: center; top: 0; right: 0; -webkit-transition: 0.6s; transition: 0.6s; } .media__body:hover { opacity: 1; } .media__body:after, .media__body:before { border: 1px solid rgba(255, 255, 255, 0.7); bottom: 1em; content: ''; left: 1em; opacity: 0; position: absolute; right: 1em; top: 1em; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: 0.6s 0.2s; transition: 0.6s 0.2s; } .media__body:before { border-bottom: none; border-top: none; left: 2em; right: 2em; } .media__body:after { border-left: none; border-right: none; bottom: 2em; top: 2em; } .media__body:hover:after, .media__body:hover:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .media__body h2 { margin-top: 0; } .media__body p { margin-bottom: 1.5em; }
the problem is that. when i try to put link in it. i can’t click the link. how?
I came across the same problem. I created a button and it wouldn’t work. The fix is to set the button with a position:relative and then a z-index so it sits on top of the hover
Absolutely beautiful. As far as the button business, I just made the whole thing a link. Hover and get the overlay, click and go wherever.
hi, this works very nice on screen. But I would like to see the overlay when tapping on tablet / smartphone. Is this possible?