Techsoft Tutorials , Latest Programming Languages Tutorials
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.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); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#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; } |
OutPut
