3 Replies - 589 Views - Last Post: 11 September 2012 - 09:19 AM

#1 AIintern  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 06-June 12

Growing only one picture at a time

Posted 06 September 2012 - 10:34 AM

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 */
}





Is This A Good Question/Topic? 0
  • +

Replies To: Growing only one picture at a time

#2 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Growing only one picture at a time

Posted 07 September 2012 - 12:24 AM

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

Was This Post Helpful? -1
  • +
  • -

#3 Utael  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 210
  • Joined: 12-December 11

Re: Growing only one picture at a time

Posted 07 September 2012 - 08:54 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 AIintern  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 06-June 12

Re: Growing only one picture at a time

Posted 11 September 2012 - 09:19 AM

Thanks for the reply! It worked.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1