smoovo
New Member
Sometimes we want to add text over image, but not as static one, we want it to be visible when it mouse over. And... if possible (it is)... make it smooth in.
Here is the code and DEMO.
The HTML code in the body.
The CSS code, can be placed inside the head.
Link to the jQuery updated file. Place this code inside your page head.
The jQuery action
You can play with this. First you have to replace the image, and the jQuery file location. The online location for jQuery is http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. You can save it and refer to it.
- Enjoy & Rate...
____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
Here is the code and DEMO.
The HTML code in the body.
HTML:
<div id="container">
<div id="text">It's smooth...<br />It's SMooVo.</div>
</div>
The CSS code, can be placed inside the head.
HTML:
#container {
width:200px;
height:200px;
position:relative;
background:url('../../images/logo.jpg') no-repeat;
}
#text {
width:200px;
height:70px;
position:absolute;
left:0;
bottom:0;
background:#000;
display:none;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
color:#fff;
}
Link to the jQuery updated file. Place this code inside your page head.
HTML:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
The jQuery action
HTML:
<script language="javascript">
$(document).ready(function() {
$("#container").hover(function(){
$("#text").slideToggle("slow");
});
});
</script>
You can play with this. First you have to replace the image, and the jQuery file location. The online location for jQuery is http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. You can save it and refer to it.
- Enjoy & Rate...
____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
Last edited: