CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ryan
Ryan

Reputation: 10141

How to make image button standout when hover without affecting other button position

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

Answers (5)

Manoj
Manoj

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

Richa
Richa

Reputation: 4270

width CSS2 :

DEMO

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

nkmol
nkmol

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

jsFiddle

Upvotes: 4

Sahil Popli
Sahil Popli

Reputation: 2003

Collection of Creative button Hover and Click Effects

Upvotes: 0

rsakhale
rsakhale

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

Related Questions