过渡时的照片 CSS

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 个图像周围放置一个容器，并将 class 命名为 .col（或任何你想给它起的 class 名称）。

同时删除图像的 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;
}

参见fiddle：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

此代码笔更详细地展示了我试图做的事情 - http://codepen.io/Grawl/pen/DovAI/

过渡时的照片 CSS

Pictures when transition take place CSS

html

css