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

0 92

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

Leave A Reply

Your email address will not be published.