1. Technology

Image Caption Animation with CSS3 Transform and Transitions

jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects.

That being said, it is now possible to do the same cool effects with CSS3 transitions and transform properties.

Today I want to show you how you can create cool animation hover effects with CSS3 animation. The images used in the demos were illustrated by Rudolph Musngi.

screen

Demo

Resources You Need to Complete This Tutorial

The Markup

With HTML5, you can now semantically wrap your images and captions using the figure and figcaption elements. For all the examples, use the same HTML markup. Wrap the images and figcaption contents with a figure element.

<figure>
        <img alt="nerd girl" src="img/img3.jpg">

        <figcaption>
            <h3>I love this title!</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <p><a href="#">Read More</a></p>
        </figcaption>
    </figure>

The CSS for Demo 1

For the CSS, the figure element will have a relative positioning. In this case, the captions and the images inside can be stacked over each other via absolute positioning. Then, we will put some basic styles on each element.

Notice that transform property – rotate on and transition property of the figcaption style are used. This will give a nice rotation and smooth effect for the caption. Some of the elements like H3 and paragraph tags will have a transition-delay property so that there will be a delay on the entrance of each elements for the caption.

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
            	top: -100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	left: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1.3s;
	-moz-transition-delay: 1.3s;
	-o-transition-delay: 1.3s;
	-ms-transition-delay: 1.3s;
	transition-delay: 1.3s;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 2

Using the same property as above for the figure, figcaption and some basic elements, remove the transform property – rotation to from the figcaption element and the transition-delay property to all of the elements except to the figcaption element. As a result, you will have smooth fading hover effects.

img {
	width: 100%;
}
figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
    border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 3

For the third demo, create a zooming effect for the image. For the image element, use the transform property – scale to change the size of the image when the mouse-over state is triggered. We will also put the transition-delay and transition properties on both figcaption and image elements.


img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure img {
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-o-transition: all 1.5s;
	-ms-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

The CSS for Demo 4

Lastly, for this demo, create cool sliding effect. You will have almost similar CSS, like the third demo. This time, you will be adding a top property position on the figcaption but without the rotation.

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 250px;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

Conclusion

And that’s it! I hope you enjoyed and learned something on this tutorial. I am hoping that you also got inspired to design more amazing image caption hover effects using CSS3 transform and transition-delay property.

No Comments
Comments to: Image Caption Animation with CSS3 Transform and Transitions

Recent Articles

Good Reads

Lower back pain is a prevalent form of discomfort experienced by individuals worldwide, affecting approximately 80% of people at⁢ some point in their lives. It can manifest as sudden, debilitating pain,‍ dull⁣ aches, stiffness,⁢ or burning sensations ⁢that radiate down ⁢the buttocks and legs. Whether acute (short-term) or chronic (long-term),⁤ lower back pain can significantly‌ […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Lower back pain is a prevalent form of discomfort experienced by individuals worldwide, affecting approximately 80% of people at⁢ some point in their lives. It can manifest as sudden, debilitating pain,‍ dull⁣ aches, stiffness,⁢ or burning sensations ⁢that radiate down ⁢the buttocks and legs. Whether acute (short-term) or chronic (long-term),⁤ lower back pain can significantly‌ […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]