In this post i will show you how to do Animated Text Overlay image hover effects using CSS3 and HTML5.
- Css3 and html5 is the technology using this you will make interactive and animated web design. Nowadays each and every website buildup using this technology.
- with advance CSS3 transitions and transforms, We can add full overlay on image that reveals animated text caption on hover.
Demo
- Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Text Overlay On Hover the Image</title>
<link href="sticky.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Animated Text Overlay On Hover Image</h1>
<div class="box">
<img src="http://techsofttutorials.com/wp-content/uploads/2014/12/new2.png">
<div class="overbox">
<div class="title overtext"> Techsoft Tutorials</div>
<div class="tagline overtext"> Free Latest Programming Languages Tutorials </div>
</div>
</div>
</body>
</html>
- You need to include Two css file as given bellow.
2) style.css
.box {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
}
.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: #FF8C1E;
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: 240px;
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);
}
3) sticky.css
#css-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #16a1e7;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.css-script-center {
width: 960px;
margin: 0 auto;
}
.css-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.css-script-center a {
text-decoration:none;
}
.css-script-ads {
width: 728px;
height:90px;
float:right;
}
.css-script-clear {
clear:both;
height:0;
}
