using this code i found.
Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
    background-color:#bca;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid green;
    padding:10px;
}
img{
width:50px;
height:50px;
overflow:hidden;
}

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block1">
<img src="imgs/staffHmImg01.jpg">
</div>

<div id="block2">
<img src="imgs/staffHmImg02.jpg">
</div>

<script>


$("#go").click(function(){
  $("#block1").animate({
    width: "100px",
    height: "100px",
    opacity: 0.6,
  }, 1500 );
});
</script>

</body>
I want to create an animation that when the user clicks on the div containing the image, the div expands horizontally to display the entire image.
I tried to add the image & an overflow: hidden. but it didn't work.
I then tried to resize the image but of course it stayed small.
what would be my best course of action? give the img an id & add a second function such as:



Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
    background-color:#bca;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid green;
    padding:10px;
}
img{
width:50px;
height:50px;
overflow:hidden;
}

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block1">
<img src="imgs/staffHmImg01.jpg">
</div>

<div id="block2">
<img src="imgs/staffHmImg02.jpg">
</div>

<script>


$("#go").click(function(){
  $("#block1").animate({
    width: "100px",
    height: "100px",
    opacity: 0.6,
  }, 1500 );

  $("#image").animate({
    width: "100px",
    height: "100px",
    opacity: a,
  }, 1500 );
});
</script>

</body>
thank you
D