Saturday, May 26, 2012
Unknown
For this I have added a image into <div> tag and then float everything so that the text will be next to the image.
Changing line-height:0px; will cause the text to come from top and <div> tag hides it again when we loose focus on image.
#code#
<html>
<head>
<title>css fade text</title>
<style text="text/css">
#ex3 {
width: auto;
height: 200px;
line-height: 0px;
color: transparent;
font-size: 70px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 900;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
img{
float: left;
margin: 0 15px;
}
</style>
</head>
<body>
<div id="ex3">
<img src="a.jpg" id="ex3">AVIXIT
</div>
</body>
</html>
#code#
<html>
<head>
<title>css fade text</title>
<style text="text/css">
#ex3 {
width: auto;
height: 200px;
line-height: 0px;
color: transparent;
font-size: 70px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 900;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
img{
float: left;
margin: 0 15px;
}
</style>
</head>
<body>
<div id="ex3">
<img src="a.jpg" id="ex3">AVIXIT
</div>
</body>
</html>
<head>
<title>css fade text</title>
<style text="text/css">
#ex3 {
width: auto;
height: 200px;
line-height: 0px;
color: transparent;
font-size: 70px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 900;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
img{
float: left;
margin: 0 15px;
}
</style>
</head>
<body>
<div id="ex3">
<img src="a.jpg" id="ex3">AVIXIT
</div>
</body>
</html>
Demo :
AVIXIT
AVIXIT*Hit a comment if you like this.
Posted in: CSS Tutorial
0 comments:
Post a Comment
This provides free backlink for you so feel free to comment and get a free backlink.