CODEWITHSUNDEEP
htmlcssimagehover
user2478632
user2478632

Reputation: 9

Hover effect making other elements move

can anyone help. I have an image of a butterfly that pops out a little when hovered over. I also have an image of a caterpillar. the trouble is that when the butterfly is hovered over the other image is also moving. how can i stop this?

The CSS is 

/*Pink Butterfly - header*/
.pinkbutterfly  {
    width: 80px;
    height: 80px;   
    overflow: hidden;
    position: relative;
    top:-30px;
    left:230px;
    }

.hoverimg:hover{
    width: 95px;
    height: 95px;
    position: relative;
    top:-30px;
    left:220px;
    }

/*Blue/Yellow Caterpillar - header*/
.blueyellowcaterpillar{
    width: 140px;
    height: 80px;
    overflow: hidden;
    position: relative;
    top:30px;
    left:550px
    }

HTML:

<div id="headercontent"> 
  <img src="nurserylogo.png" alt="Cassiltoun Stables Nursery Logo" class="nurserylogo">
  <img src="Edited Characters/pinkbutterfly.png" alt="pinkbutterfly" class="pinkbutterfly hoverimg">
  <img src="Edited Characters/blueyellowcaterpillar.png" alt="blueyellowcaterpillar" class="blueyellowcaterpillar choverimg">
  <p style="font-family:'FeltTip'">Tel: 0141 631 5235</p>
  <div id="navigation">
    <ul class="navlist"> 
      <li> about </li>
      <li> pictures </li>
      <li> find us </li>
      <li> contact</li>
    </ul>
  </div>
</div>

Upvotes: 1

Views: 2585

Answers (1)

vals
vals

Reputation: 64254

Changing the size of the element makes the layout rearrange.

To make it greater without afecting the layout, try

.hoverimg:hover {
    -webkit-transform: scale (1.2);
    transform: scale (1.2);
}

That should make it bigger, keeping it centered in the previous position. If this is not what you want, add

    -webkit-transform-origin (top, center);
    transform-origin (top, center);

Upvotes: 1

Related Questions