Question

嘿伙计们，我刚刚开始徘徊在盘旋和图像中，非常兴奋地学会了这一点。

我实际上遇到了CSS3的问题

当我将鼠标悬停在它们上面时，我想知道所有其他图像是否可以保持不动。我曾尝试在CSS3中寻找一些东西但没有出现。

我的图像宽度和高度都高达200px。我想知道当图像变大时是否所有其他图像都可以保持固定。

无论如何这是我的CSS

*{
  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;

}

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

#container li{
  float:left;
  margin: 30px;
  list-style-type:none;
  cursor:pointer;
}



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

和我的HTML

<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>

Answer 1

以下是您可以做出的影响最小的更改：更改悬停图像边距以使流量保持不变：

#container img:hover{
  filter:grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 2;
  width:200px;
  height:200px;
  margin: -50px; /*this will make the image seem to be 100px by 100px*/
}

以下是您网站的有效版本：http://codepen.io/anon/pen/Dsblw它只有一行更改margin: -50px。

Answer 2

我将li的宽度与初始图片相同，然后将广告position:abolute添加到悬停的伪类

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

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

http://codepen.io/anon/pen/Ecuby

Answer 3

我会将li设为position:relative并拥有图片的width和height。

img.size应为position:absolute，并在悬停时调整其大小和边距以使其居中。

使用绝对定位并将其从流中移除可以实现许多效果，例如调整大小的过渡演示 http://codepen.io/anon/pen/EisIK

此外opacity从0变为1 ..所以使用2与1

相同

或者你可以使用不影响流量的transform:scale(2);。
演示 http://codepen.io/anon/pen/jkapL

这可能通过CSS3吗？还是我需要javascript？

3 个答案: