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

266

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="https://placeimg.com/400/300/nature"/>  
        <div class="overbox">
			<div class="title overtext">
				Latest Blog
			</div>
			<div class="tagline overtext">
			My Public NoteBook<br/>
                        <a href="https://www.latestblog.org" style="color:#ffffff">www.latestblog.org</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

Social Media Auto Publish Powered By : XYZScripts.com