Question

My code looks like this

CSS~

 div{
 display:inline; <!-- this is where I need the help -->
 }


a img{
margin: 5px;
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;

}
.getbig{ 
top: 0px;
width:136px;
height:112px;
}
.bigimage{
width:100%;
height:100%;
left:15px;
top:15px;
}

Html~

<div class="getbig">

<a href="../pictures2/band1.jpg" target="_blank" ><img  src="../thumbnails/1.jpg" width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"></a> 

<a href="../pictures2/band4.jpg" target="_blank"><img src="../thumbnails/4.jpg"  width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"> </a>

<a href="../pictures2/band5.jpg" target="_blank"><img src="../thumbnails/5.jpg"  width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"></a>

<a href="../pictures2/band7.jpg" target="_blank"><img src="../thumbnails/7.jpg"  width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"> </a>
</div>

jQuery

$(document).ready(function(){

$('.bigimage').mouseover(function(){

  $(this).stop().animate({
      "width": "105%",
      "height": "105%",
      "left":"0px",
      "top":"0px"
      }, 200,'swing');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "100%","height":"100%","left":"15px","top":"15px"},200,'swing');
});;
 });

So all this does is just make an image grow a by 5% when I hover over it and then return to normal when I mouse off.

Here is my Question: Why, when I choose display: inline, does all those images grow like crazy. My problem is that when you display this in the brower, it’s all under each other and I don’t want that. I want them each next to each other or like an in-line, but when I set that div to display:inline; it just makes everything grow MASSIVE.

Any ideas?

Answer 1

It’s because you have set the width and height to grab 100% of the container div.
I have replicated your code and demonstrated in Jsfiddle

var divheight = $('.bigimage').height();
var divwidth = $('.bigimage').width();
$('.bigimage').mouseover(function() {



    var new_height = divheight * 1.05;
    var new_width = divwidth * 1.05;
    $(this).stop().animate({
        "width": new_width + "px",
        "height": new_height + "px",
        "left": "0px",
        "top": "0px"
    }, 200, 'swing');
}).mouseout(function() {
    $(this).stop().animate({
        "width": divwidth,
        "height": divheight

    }, 200, 'swing');

});;​

Note that I have set my variables outside of the hover function, the reason is that my height() and width() functions grab the actual current size of the image.

Also, I have changed your css a little bit.

Least but not last you can use CSS3 transitions if you know the actual width of each image

.bigimage{
    left:15px;
    top:15px;
    width:112px;
    height:160px;
     -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);

}



.bigimage:hover {
    height:120px; 
    width:200px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
}