Simple Image Hover Effects with Captions Text

Simple Image Hover Effects with Captions Text

If you are a designer then you surely love with Image hover effects because it’s a simple and quick way to show text, description, and caption on the image when hovering it.

The hover effects can be developed by using the CSS3 features such as animation, transition and pseudo elements in order to create such beautiful and nice looking subtle effects.

They enhance the user experience of the website and make easier for users to navigate the site.  Also, it’s a great way to show some important text and reveal it in a nice way.

By using the Jquery, You can easily create amazing image overlay hover effects But it’s overload your site. After released of CSS3, We don’t need to rely on Javascript too much. CSS3 make designing easier.

By using the CSS3, We can easily make cool looking effects and don’t need to implement any javascript. Another reason of using CSS3 is its load faster as compared to jQuery.

The hover effects are required to improve the design, styling, and usability of a website. It adds extra energy to your site and improves the user experience. It allows users to stay more time on your site.

We have made four effects, but here I am going to explain the only the first one. You will get the code examples and see the demo for all other effects.

The Markup

We have total 4 really simple effects that you can find in the demo but here I will show you the source code of the first effect.

Ok, let start with the HTML.

<figure class="test col-xs-6">
    <img src="https://images.freeimages.com/images/premium/previews/3252/3252135-music-stage.jpg">
    <figcaption>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem nunc, sollicitudin a nisi sodales, imperdiet dignissim enim. Nam sapien quam</p>
    </figcation>
</figure>

The Styling

Here is Complete CSS for the first effect.

/*With :after */
figure.test {	
	display: inline-block;
	position: relative;
	overflow: hidden;	
	text-align: center;		
	cursor: pointer;
	width:44%;
}
figure.test img {
	width: 100%;
	height: 100%;
}
figure.test figcaption {
	position: absolute;
	top: 50%;
	left: 22.5%;
	right: 22.5%;	
	width: 200px;
	opacity: 0;
	z-index: 1;
	transition: all 0.8s ease-out;
	transition-delay: 0.2s;
}
figure.test:after {
	display: inline-block;
	position: absolute;
	content: "";
	top: 7%;
	left: 10%;
	right: 10%;
	bottom: 7%;
	background: white;
	opacity: 0;
	transition: all 0.8s ease-out;
}
figure.test:hover:after {
	opacity: 0.9;
}
figure.test:hover figcaption {
	transform: translateY(-50%);
	opacity: 1;
}

Code ExamplesYou May Also Like