Animated Image -HTML & CSS

The pure CSS and HTML techniques to create an animated image with caption effects when mouse hover on existing image.

Table Of Content

• HTML
• CSS

The HTML and CSS are very important part to develope this animated image operation.

The HTML

The animated image is represent in HTML using imgtag. And also image caption specify here.

The CSS

The CSS represent within

tag. Its very useful and attractive to desingn in web site development.

*, *::before, *::after
	{
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
	}
	html, body
	{
		margin: 0px;
		padding: 0px;
		font-family: 'Lato',sans-serif;
		font-size: 18px;
		font-weight: 300;
		height: 100%;
		color: #fff;
	}
	figure
	{
		width: 400px;
		height: 300px;
		overflow: hidden;
		position: relative;
		display: inline-block;
		vertical-align: top;
		border: 5px solid #fff;
		box-shadow: 0 0 5px #ddd;
		margin: 1em;
	}
	figcaption
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		text-align: center;
		font-weight: bold;
		width: 100%;
		height: 100%;
		display: table;
	}
	figcaption div
	{
		display: table-cell;
		vertical-align: middle;
		position: relative;
		top: 20px;
		opacity: 0;
		color: #2c3e50;
		text-transform: uppercase;
	}
	figcaption div:after
	{
		position: absolute;
		content: "";
		left: 0; 
		right: 0;
		bottom: 40%;
		text-align: center;
		margin: auto;
		width: 0%;
		height: 2px;
		background: #2c3e50;
	}
	figure img
	{
		-webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
		-webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
	}
	figure:hover figcaption
	{
		background: rgba(255,255,255,0.3);
	}
	figcaption:hover div
	{
		opacity: 1;
		top: 0;
	}
	figcaption:hover div:after
	{
		width: 50%;
	}
	figure:hover img
	{
		-webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
	}

Full Code

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.