Reputation: 10141
I have a simple script: http://jsfiddle.net/PA9Sf/
I want when I hover a particular button, the size is enlarged and the button stand out on the top of other buttons, instead of affecting the position of other buttons as currently in the jsfiddle above.
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<script>
jQuery('img').hover(function() {
$(this).attr('width', '200px');
}, function() {
$(this).attr('width', '100px');
});
</script>
Upvotes: 1
Views: 2278
Reputation: 1890
Changed your code.Try this Fiddle
CSS:
.img{
float:left;
margin:0px 10px;
position: fixed;
top:10px;
}
.img1{
left:0px;
z-index:3;
}
.img2{
left:120px;
z-index:2;
}
.img3{
left:240px;
z-index:1;
}
Upvotes: 1
Reputation: 4270
width CSS2 :
div{width:100px; float:left;border:1px solid #fff; margin-right:5px}
div img{width:100%;}
jQuery('img').hover(function() {
$(this).css({width : '200px', position:'absolute'});
}, function() {
$(this).css({width: '100px', position:'static'});
});
Upvotes: 0
Reputation: 8091
First of all i would highly recommend you to use pure CSS for this.
Second, I think you can achieve this with a transform scale:
img:hover
{
transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5)); /* IE 9 */
-webkit-transform: scale(1.5, 1.5);
}
You can play around with the ratio yourself. Note that i added a marign so the images don't go off-screen
Upvotes: 4
Reputation: 1036
On hover I gave a try with css position as fixed, please try this new jsfillde - http://jsfiddle.net/c3hwf/
CSS Code
img{
width: 100px;
}
img:hover{
width:200px;
position: fixed
}
HTML Code
<p>This is just a test</p>
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
Upvotes: 0