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.