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.

 
Thumb
Test Image Caption




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





	
Animated Image




  
Thumb
Test Image Caption




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

Leave a Reply

Your email address will not be published. Required fields are marked *