As i am trying to implement Sliding Boxes and Captions with jQuery Mouse over effect for my games thumbnails. Whenever i mouse over on a thumbnail the caption will come and when i take off the mouse pointer the caption disappears. I have implemented it but getting small issue.
The issue with jQuery mouse over is when the page is getting loaded for the first time the mouse over div comes without taking the mouse over to it which i don't want rather i want whenever the user takes the mouse pointer over the thumbnail the jquery effect should come. See my below code snippet.
Reference: (http://www.huzgames.com/) Please see the New Games Section.
Code:
<!doctype html>
<html>
<head>
<style>
*{ padding:0px; margin:0px; }
a{ color:#00c415; }
h5{
margin: 10px 10px 0 10px;
color:#FFF;
font:13pt Segoe Print;
letter-spacing:-1px;
font-weight: bold; }
.boxgrid{
/*width: 325px;
height: 260px; */
width: 160px;
height: 117px;
margin-top:10px;
margin-left: 4px;
float:left;
background:#161613;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 117px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 117;
left: 0;
}
.caption .boxcaption {
top: 100;
left: 0;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'1px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'117px'},{queue:false,duration:160});
});
});
</script>
</head>
<body>
<div class="boxgrid captionfull">
<img src="path" height="117" width="160" alt="" />
<div class="cover boxcaption">
<h5 align="center">xxxxxxxx</h5>
<p align="center"><a href="#" style="text-decoration:none;font-size:16px; font-family:Wanted M54"><b>Click To Play</b></a></p>
</div>
</div>
</body>
</html>
