I'm currently experimenting with JQuery and CSS to create a user-friendly navigation experience for users as they browse through a grid of variously-sized images.
Essentially, my goal is to have the images expand when hovered over (which is functioning correctly), along with increasing the width of the div to display additional information. Oddly enough, I've encountered some strange behavior during hover, and upon mouseout, the image closes completely. It seems like I may be missing a "stop" command somewhere in the code, but I can't pinpoint where that might be. Could someone please take a look at this?
JQuery:
jQuery(function($){
$('.bar').mosaic({
animation : 'slide'
});
});
HTML:
<div class="MBT-CSS3">
<!--Bar-->
<div class="mosaic-block bar">
<a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">
<h4>This video is really cool! Click to watch more!</h4>
<p>by Media Innovation Team</p>
</a>
<img src="img/grad1.png"/>
</div>
</div>
<div class="clearfix"></div>
CSS
.MBT-CSS3 div{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
position:relative;
overflow:hidden;
background-color:#000;
width: auto;
height: auto;
}
.MBT-CSS3 div:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
opacity: 1;
z-index: 100;
width:600px;
}
If anyone could lend a hand with this issue, it would be greatly appreciated!!! Thank you for your time!