简体   繁体   中英

why wont my css images stay still?

hey guys im tyring to keep my css images and links still. I have my position relative, but still moves. Why is that.

I also tried doing them absolute, but when I try to add width and height, it wont budge.

I am pretty much trying to keep my images and link still when I hover over them. I thought everything was right when I use position relative?

this is my codepen http://codepen.io/willc86/pen/Kpxqk

and my code

*{
  margin: 0px;
  padding 0px;
}
body{
  background-image: url('http://pxwallpaper.com/wp-content/uploads/2013/08/barcelona-black-new-wallpaper-94.jpg');
  background-size:cover;


}

#container{
  width: 900px;
  height: 900px;
  background-color: white;
  margin: 60px auto;
  overflow:auto;
}


img.size{

  width:100px;
  height:100px;
  -webkit-filter:grayscale(90%);
  opacity:0.4;
  transition:all 0.5s;
}

#container ul{
  margin:70px 30px 6px 10px;
}

#container li{
  float:left;
  margin: 30px;
  list-style-type:none;
  cursor:pointer;
  position: relative;
  width:100px;
  height:100px;
}



#container img:hover{
  filter:grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 2;
  width:160px;
  height:160px;

}




<html>
  <head>

  </head>
  <title>
  </title>
  <body>


    <div id="container">

      <ul>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrd
                rVfYtm4P73YEm9w"></li>
                <li><img class="size" src="http://kodiakherbal.com/wp-content/uploads/2013/03/canmore_rocky_mountains-hd-wallpaper.jpg"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>

      </ul>


    </div>



  </body>
</html>

Don't set the width on the hover style.

#box li:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity:1;
 }

try change width:220px to 200px

#box li:hover{

  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity:1;
   width: 200px;

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM