Question

Please check the picture first我有4列和2行的8张图片，基本上我想要的是以下内容：当在第一行中悬停2张图片时，只有2张图片应该在2行中移动过渡不是整行。谢谢！

.primary,
.secondary,
.third,
.fourth, 
.fifth,
.sixth,
.seventh,
.eight{
       float: left;
       width: 300px;
       height: 420px;
       margin-top: -90px;
       margin-left: 60px;
       overflow: hidden;
       font-size: 0.9em;
       text-align: center;
       display: block;
       border-radius: 10px;
       box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
      -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
      -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
      -webkit-transition: height 2s; 
              transition: height 2s;
}

.eight:hover,
.seventh:hover,
.sixth:hover,
.fifth:hover,
.fourth:hover,
.third:hover,
.secondary:hover,
.primary:hover {
    float: left;
    display: block;
    height: 550px;
}

Answer 1

由于过渡与高度有关，因此更容易考虑使用向左浮动的列。只需在每3个图像周围放一个容器，其中包含名为.col的类（或任何您想要的类名）。

同时删除图片的float和display样式：

.primary,
.secondary,
.third,
.fourth, 
.fifth,
.sixth,
.seventh,
.eight{
   width: 300px;
   height: 420px; 
   margin-top: -90px;
   margin-left: 60px;
   overflow: hidden;
   font-size: 0.9em;
   text-align: center;
   border-radius: 10px;
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -webkit-transition: height 2s; 
          transition: height 2s;
}

.eight:hover,
.seventh:hover,
.sixth:hover,
.fifth:hover,
.fourth:hover,
.third:hover,
.secondary:hover,
.primary:hover {
    height: 550px;
}

.col{
  height:auto;
  position:relative;
  border:1px solid blue;
  width:33%;
  float:left;
}

请参阅小提琴：https://jsfiddle.net/wp9uj9o8/5/

Answer 2

您希望图像放大而不是转换整行吗？

我已经快速复制并添加了悬停效果的转换。它基本上会将悬停时的背景大小从110％更改为100％。

  .primary{
     transition: all 0.2s;
     background-image:url(https://placehold.it/300x550);
     background-size: 110%;
     background-position: center;
     background-repeat: no-repeat;
     background-color: gray;
     position: relative;
 }

然后悬停

.primary:hover {
    background-size: 100%;
}

http://codepen.io/mikbeach/pen/pyKKXv

此codepen更详细地展示了我想要做的事情 - http://codepen.io/Grawl/pen/DovAI/

转换发生时的图片CSS

2 个答案: