Reputation: 117

Images wiggles when hover (scale effect)

My image links are wiggling a bit when I'm hover the images. I don't know how to fix this :/ I'm using the scale effect in css to make the pictures a bit bigger when hover.

I've tried to remove the shadow effect, but still the same problem...

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="icon.ico" type="image/ico" />
<title>THU | TheHardUploader</title>
</head>
<style>
    body{
        margin: 0px auto;
        background-image:url(aa.jpg);
        background-position: center;
        background-attachment:fixed;
        background-color:black;
        background-repeat: no-repeat;
        }
    #main{
        margin: 0px auto;
    }

    .banner{
        height: 210px;
        margin-top: 35px;
        background-color: black;
        -khtml-opacity:.50; 
        -moz-opacity:.50; 
        -ms-filter:”alpha(opacity=50)”;
      filter:alpha(opacity=50);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
      opacity:.50; 
      border-top: 5px solid gray;
      border-bottom: 5px solid gray;
    }

    .logo{
        margin: 0px auto;
        margin-top: -300px;
        position:absolute;
        margin-left: 40px;
    }

    .recordsbild{
        margin: 0px auto;
        margin-left: 250px;
        position:absolute;
        margin-top: -200px;
    }

    .line{
        position:absolute;
        height: 180px;
        width: 10px;
        background-color: white;
        margin-top: -195px;
        margin-left: 950px;
    }
    .musikstil{
        position:absolute;
        font-family: "Arial Rounded MT Bold";
        font-size: 20px;
        margin-left: 420px;
        margin-top:-50px;


    }

    .musikstil a{
        text-decoration: none;
         transition: opacity .35s ease-in-out;
         -moz-transition: opacity .35s ease-in-out;
        -webkit-transition: opacity .35s ease-in-out;
        color: white;
    }

    .musikstil a:hover{
        opacity: 0.2;
    }


    .menu{
        position:absolute;
        width: 120px;
             opacity: 1.0;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    margin: auto;
    margin-top: -190px;
    margin-left: 1020px;
    }

    .menu a{
        color: white;
        font-family:"Arial Rounded MT Bold";
        text-decoration:none;
        font-size: 20px;
         transition: opacity .25s ease-in-out;
         -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
    .dub{
        color:white;
    }

    .hard{
        color: #009cff;

    }
    .glitch{
        color: #744eac;

    }
    .chill{
        color: #bc0096;
    }

    .menulogos{
        position:absolute;
        margin-left: 890px;
        margin-top: -215px;
    }
    .shop{
        position: absolute;
        margin-top: 6px;
    }
    .promoting{
        position: absolute;
        margin-top: 41px;
    }
    .about{
        position: absolute;
        margin-top: 35px;
    }
    .artists{
        position: absolute;
        margin-top: 28px;
    }
    .release{
        position: absolute;
        margin-top: 17px;
    }

    .menu a:hover{
        opacity: 0.2;
    }
    .bannerwrap{
        width: 1280px;
        margin: 0px auto;
    }
    .socialmedia{
        margin: 0px;
        margin-left: 350px;
        margin-top: 20px;
    }

    .socialmedia img{
        -webkit-transform:scale(0.9); /*Webkit: Scale down image to 0.8x original size*/
        -moz-transform:scale(0.9); /*Mozilla scale version*/
        -o-transform:scale(0.9); /*Opera scale version*/
        -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.5s; /*Mozilla duration version*/
        -o-transition-duration: 0.5s; /*Opera duration version*/
        opacity: 1; /*initial opacity of images*/       
    }
    .socialmedia img:hover{
        -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.1); /*Mozilla scale version*/
        -o-transform:scale(1.1); /*Opera scale version*/
        box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
        -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
        -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
        opacity: 1;

    }

</style>
<body>
    <div id="main">

      <div class="banner">    
      </div>
     <div class="bannerwrap">
      <div class="logo">
         <img src="logo.png" />
      </div>
      <div class="recordsbild">
        <img src="records.png" />
      </div>
      <div class="musikstil">
        <a href="#"> Dubstep &#11; |</a> 
        <a href="#"> &#11; Hardstyle &#11; |</a>
        <a href="#"> &#11; Glitch Hop &#11; |</a> 
        <a href="#"> &#11; Chillstep</a>
      </div>
      <div class="line">
      </div>
      <div class="menulogos">
        <img src="menulogo.png" />
      </div>
      <div class="menu">
        <a href="#" class='contact'> Contact Us </a>
        </br>
        <a href="#" class='shop'> Shop </a>
        </br>
        <a href="#" class='release'> Releases </a>
        </br>
        <a href="#" class='artists'> Artists </a>
        </br>
        <a href="#" class='about'> About Us </a>
        </br>
        <a href="#" class='promoting'> Promoting </a>
      </div> 
      </div>
      <div class="socialmedia">
            <a href="#" class="fb"> <img src="fb.png" /></a>
            <a href="#" class="youtube"> <img src="youtube.png" /> </a>
            <a href="#" class="twitter"> <img src="twitter.png" /> </a>
            <a href="#" class="soundcloud"> <img src="soundcloud.png" /> </a>
      </div>
    </div>

</body>
</html>

Upvotes: 5

Answers (3)

Wobee

Reputation: 153

I know I'm kind of late to the party, but since none of the above worked for me, I'm guessing there must me others having the same issue when using opacity on hover.

The solution that ended up working for me was setting this to the item that was wiggleing:

-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

This is forcing the computer to use the Graphics Processing Unit, instead of the browser running on the CPU.

Upvotes: 3

Mike

Reputation: 17230

If you're using a webkit browser the following may help. Adding this to the container of the element you are animating should make the animation smoother. As far as I understand it, it forces the browser into using hardware acceleration.

.socialmedia {
     -webkit-backface-visibility: hidden;
}

Upvotes: 14

Miljan Puzović

Reputation: 5820

It's a common problem with CSS3 transformations. I've notice that after text rotation. And I've found some strange solution. I don't know how this works - but works :) Just use some of CSS3 filters. Any filter. For webkit that would be maybe

-webkit-filter: blur(0px);

http://jsfiddle.net/Rfg2V/

That wouldn't change default blur property, but will cause smooth transformation, translation, and give antialiasing effect.

For Firefox you can use

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

This fixes the problem, but after that elements with filter properties may look a bit blurred. Not because blur filter, result is the same with any filter.

Upvotes: 4

Images wiggles when hover (scale effect)

Answers (3)

Related Questions