Friday, December 13, 2019
  • Privacy-Policy
  • Contact
  • About Us
  • IELTS Exam Pattern
Techsoft Tutorials
  • Home
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • Programming Languages
    • PHP
    • JAVA
  • Frameworks
    • IONIC FRAMEWORK
    • CAKEPHP
  • Mobile App Development
  • Databases
  • DevOps
  • More
    • MISCELLANEOUS
No Result
View All Result
  • Home
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • Programming Languages
    • PHP
    • JAVA
  • Frameworks
    • IONIC FRAMEWORK
    • CAKEPHP
  • Mobile App Development
  • Databases
  • DevOps
  • More
    • MISCELLANEOUS
No Result
View All Result
Techsoft Tutorials
No Result
View All Result
Home HTML 5 & CSS3

Animated Text Overlay image hover effects using css3 and html5

Bhavin Shiroya by Bhavin Shiroya
August 3, 2019
in HTML 5 & CSS3, WEB DESIGNING
0
Animated-Text-Using-Css3
23
SHARES
167
VIEWS
Share on FacebookShare on Twitter

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

  1. 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;
}
Tags: css3 hover animationcss3 hover effectscss3 image hover effectsimage hover effects css3Overlay image
Bhavin Shiroya

Bhavin Shiroya

Web Developer by Professional, Blogger by hobby, Youtuber by passion

Related Posts

Admin-Templete
FREE RESPONSIVE TEMPLATES

Top 10 free bootstrap themes for admin dashboard template

August 3, 2019
free-responsive-html-website-templates-05
HTML 5 & CSS3

free top 10 responsive web design templates 2015

July 7, 2019

Categories

  • CAKEPHP
  • FREE RESPONSIVE TEMPLATES
  • HTML 5 & CSS3
  • IONIC FRAMEWORK
  • JAVA
  • JQUERY
  • MISCELLANEOUS
  • PHP
  • WEB DESIGNING
  • Privacy-Policy
  • Contact
  • About Us
  • IELTS Exam Pattern

© 2019 All Rights Reserved By Techsoft Tutorials

No Result
View All Result
  • Home
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • Programming Languages
    • PHP
    • JAVA
  • Frameworks
    • IONIC FRAMEWORK
    • CAKEPHP
  • Mobile App Development
  • Databases
  • DevOps
  • More
    • MISCELLANEOUS

© 2019 All Rights Reserved By Techsoft Tutorials

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.