[AIintern]

at the bottom of my web page there is a sponsor section. When you hoover over one of the picutres they become opaque and they grow just a few pixels.. The only problem is that once you hover over one of the pictures, the rest of the pictures "move" (they dont grow or become opaque, but they move)I want only one image to grow while the others stay in the same place

Is there anyway to fix this problem?

.sponser
{
  margin-top:390px;
  width:650px;
  height:60px;
  border:1px solid #888;
}

.sponserimgage
{
  width:80px;
  height:40px;
  margin-right:5px;
  border-radius: 10px;
  float:center;
  opacity:0.7;
  filter:alpha(opacity=70); /* For IE8 and earlier */
}

.sponserimgage:hover
{
  opacity:1.0;
  height:45px;
  filter:alpha(opacity=100); /* For IE8 and earlier */
  transition:width 1s;
  -moz-transition:width 1s; /* Firefox 4 */
  -webkit-transition:width 1s; /* Safari and Chrome */
  -o-transition:width 1s; /* Opera */
  transition:height 1s;
  -moz-transition:height 1s; /* Firefox 4 */
  -webkit-transition:height 1s; /* Safari and Chrome */
  -o-transition:height 1s; /* Opera */
}

[amit.soni]

here is your solution...
just add margin-left and margin-top property in ur hover effect and give a position to your image...and your done...
here is your revised code...

.sponser
{
  margin-top:390px;
  width:650px;
  height:60px;
  border:1px solid #888;
}

.sponserimgage
{
  position:relative;   /* Newly Added line */
  width:80px;
  height:40px;
  margin-right:5px;
  border-radius:10px;
  float:center;
  opacity:0.7;
  filter:alpha(opacity=70); /* For IE8 and earlier */
}

.sponserimgage:hover
{
  opacity:1.0;
  width:85px;
  height:45px;
  margin-top:-5px; /* Newly Added line */
  margin-left:-5px; /* Newly Added line */
  filter:alpha(opacity=100); /* For IE8 and earlier */
  transition:all 1s;
  -moz-transition:all 1s; /* Firefox 4 */
  -webkit-transition:all 1s; /* Safari and Chrome */
  -o-transition:all 1s; /* Opera */
  
}

and check this fiddle : http://jsfiddle.net/...7soni/eU4Gc/40/

Happy Coding

This post has been edited by amit.soni: 07 September 2012 - 12:30 AM

[Utael]

While helping people is nice, at dream in code we don't like to just hand code out. pointing them in the right direction is good but doing their code for them is not.

[AIintern]

Thanks for the reply! It worked.