Slide In Box Jquery
Hi, in this tutorial we'll explain how to use slide-in box floating on image. We are using jQuery and CSS to do the job.
Example
Move your mouse over the image to see example.How To?
First we have to set the image and the text box in place.
<div id="container">
<div id="text">It's smooth...<br />It's SMooVo™.</div>
</div>
<div id="text">It's smooth...<br />It's SMooVo™.</div>
</div>
Now lets make things clear with CSS.
#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;
}
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;
}
jQuery time has come. Place this code between your <head> and </head> to get the latest jQuery script from Google's DB.
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Finish it by calling the function with mouse-over control. You can place this call at the end of the HTML document.
<script language="javascript">
$(document).ready(function() {
$("#container").hover(function(){
$("#text").slideToggle("slow");
});
});
</script>
$(document).ready(function() {
$("#container").hover(function(){
$("#text").slideToggle("slow");
});
});
</script>
That's it, you can view the example again.
News
CMSOur new management system designed to provide 100% tracking and managing stores online. The new system built by the highest technology, and this provides more power by less size and more flexibility by less pages.
iPhone AppsWe start our new firm in New-York of iPhone™, iPod™ & iPad™ Apps development. We are in process of 5 new apps that never seen before.
New projects
Imani Chocolatiers LLC is a new growing business in the candy and gifts industry. This website has been designed and programmed by SMooVo for ecommerce use, and it is using our new CMS for shopping carts, orders management and products management.
Technology used: HTML5, CSS, JavaScript, jQuery, PHP, MySQL, Photoshop CS4, Flash CS4, ActionScript3.0.
Technology used: HTML5, CSS, JavaScript, jQuery, PHP, MySQL, Photoshop CS4, Flash CS4, ActionScript3.0.
This website been made for professional locksmith company in NY. We are managing their website and their SEO. It is made with template.
New Testimonials
"It is scary to invest money while you trying to grow, but with Smoovo it's a different story. From the beginning they helped us to understand and believe in our goal, and they give us the idea behind the web design."
Eli, NY
"I'm so happy with their work; they have put my business on line. I have more customers and I'm keeping get compliments about my online business."
Roi, AZ
"Even though I am in Australia and Smoovo is in the USA, my project developed by Smoovo, could not of gone better. Nothing was a problem and Smoovo's business manner was impeccable. If you need website development I highly recommend the guys at Smoovo."
Parrish, Australia
"smoovo is by far the most reliant and responsive team I have ever worked with. They go far and beyond your project expectations and have so much knowledge and input into your project that it's as if they are your partners in business. It's always a pleasure working with them and they are very reasonably priced."
Oded, New-York