Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating a caption on image overlay

Creating a caption on image overlay

Problem

I am trying to make it so when a mouse hovers over an image it displays a Caption and a blue background. The effect I am trying to replicate can be found on any image at http://adamginther.com/gradshow/students.php, I am trying to take this effect to the images i Samples on http://adamginther.com/gradshow/students/adam-ginther.php. Thanks!

Samples
Intestellar Test
SPUD Test
Work01 Test
.overlay-caption { position: absolute; top: 0; left: 0; background: $cyan-overlay; width: 100%; height: 100%; opacity: 0; color: #fff; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 2em; text-align: center; padding: 60px 30px 0 30px; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; /* Safari */ -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; &:hover { .overlay-caption { opacity: 1; } }
Problem courtesy of: Adam Ginther

Solution

Add to CSS:

#samples .work-image a:hover .overlay-caption {
   opacity: 1;
}
Solution courtesy of: drserge

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating a caption on image overlay

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×