Freelance web designer and developer Mary Lou has created so many awesome tutorials and today we will feature another one of her creations which is the subtle caption hover effects. It is a stylish effect for image caption using CSS3. Her idea here is to have grid figures then apply the hover effect to the items, that will unveil caption with the title, author and link button. She used 3D transforms for some of the effects that aim to keep it subtle.

Take note that it only works on browsers that support CSS properties.

For the markup, the grid’s structure is created with an unordered list, each item will contain figure element.

Below is the markup which is the default structure for all the grid samples.

<ul>
 <li>
 <figure>
 <img src="images/1.png" alt="img01">
 <figcaption>
 <h3>Camera</h3>
 <span>Jacob Cummings</span>
 <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
 </figcaption>
 </figure>
 </li>
 <li>
 <figure>
 <!-- ... -->
 </figure>
 </li>
 <!-- ... -->
</ul>

For its CSS, it will not contain vendor prefixes, however you will see them in the files.

.grid {

padding: 20px 20px 100px 20px;

max-width: 1300px;

margin: 0 auto;

list-style: none;

text-align: center;

}

.grid li {

display: inline-block;

width: 440px;

margin: 0;

padding: 20px;

text-align: left;

position: relative;

}

To reset the margins

.grid figure {

margin: 0;

position: relative;

}

Maximum width of 100% for the image.

.grid figure img {

max-width: 100%;

display: block;

position: relative;

}

Positioning the figcaption.

.grid figcaption {

position: absolute;

top: 0;

left: 0;

padding: 20px;

background: #2c3f52;

color: #ed4e6e;

}

Defining styles.

.grid figcaption h3 {

margin: 0;

padding: 0;

color: #fff;

}

.grid figcaption span:before {

content: 'by ';

}

.grid figcaption a {

text-align: center;

padding: 5px 10px;

border-radius: 2px;

display: inline-block;

background: #ed4e6e;

color: #fff;

}

Adding media query.

@media screen and (max-width: 31.5em) {

.grid {

padding: 10px 10px 100px 10px;

}

.grid li {

width: 100%;

min-width: 300px;

}

}

Mary Lou has provided different CSS codes for different effects, check them out via this link.