Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Images wiggles when hover (scale effect)

Tags:

html

css

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>
like image 471
Adam Zacke Erlandsson Avatar asked Apr 25 '13 07:04

Adam Zacke Erlandsson


1 Answers

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;
}
like image 98
Mike Avatar answered Sep 22 '22 03:09

Mike