Create Animated Text Overlay On Image On Mouse Hover In Pure CSS3

In this post I am going to share simple CSS only code written by paul del signore to Create Animated Text Overlay On Image On Mouse Hover so that you can showcase your images with some text info, when ever visitor mouse over on any image an animated text overlay will display with some info about that image. It is helpful to display full product image with text overlay product info.




Creating Animated Text Overlay On Mouse Hover Effect

HTML

Create box container and insert image then put text caption inside overbox class which will act like text overlay on hover.

<div class="box">  
        <img src="http://placeimg.com/400/300/nature"/>  
        <div class="overbox">
			<div class="title overtext">
				Rohit Kumar
			</div>
			<div class="tagline overtext">
			My Public NoteBook<br/>
                        <a href="http://www.iamrohit.in" style="color:#ffffff">www.iamrohit.in</a>
			</div>
    	</div>
	</div>



CSS

Now add CSS3 transitions to apply text overlay effect on mouse hover.

 
.box {  
    cursor: pointer;  
    height: 250px;   
    position: relative;  
    overflow: hidden;  
    width: 400px;
	font-family: 'Open Sans', sans-serif;
 
}  
 
 .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  
 
 
.box .overbox {  
    background-color: #304562;  
    position: absolute;
	top:0;
	left:0;
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    opacity: 0;  
    width: 360px;  
    height: 200px;  
	padding: 130px 20px;
 
}  
 
.box:hover .overbox {  
    opacity: 1;
}
 
.box .overtext {
	-webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;
	transform: translateY(40px);
	-webkit-transform: translateY(40px);
}
 
 
.box .title {
	font-size: 2.5em;
	text-transform: uppercase;
	opacity: 0;
	transition-delay: 0.1s;
    transition-duration: 0.2s;
}
 
.box:hover .title, .box:focus .title {  
    opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
}
 
 
.box .tagline {
	font-size: 0.8em;
	opacity: 0;
	transition-delay: 0.2s;
    transition-duration: 0.2s;
}
 
.box:hover .tagline, .box:focus .tagline {  
    opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
}

See live demo and download source code.

DEMO | DOWNLOAD



Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.