Question

我正在研究一些过渡相关的盒子，我遇到了这个问题。这是一些灰度图像。当你将它们悬停在它们上面时，它们会进入正常状态。当您将鼠标悬停在图像上时，实际问题是有一个正在显示边框和特定高度的类。我给了班级特定的高度，当你悬停在图像上时，班级的高度应该增加并停在一个特定点。但是，高度转换不起作用。

＆＃13;

.section-inner {
    width: 440px;
    margin: 0 auto;
}
.grid-img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.grid-img {
    background-color: #ffffff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    display: inline-block;
    margin-right: 50px;
    transition: all 0.8s ease-in-out;
}
.profile img {
    width: 150px;
    height: auto;
}
.img-caption {
    top: 10px;
    left: 5%;
    z-index: -1;
    height: 20%;
    position: absolute;
    display: none;
    width: 90%;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    border: 4px solid orange;
    display: block;
    height: 120%;
}
.dummy {
    position: absolute;
    bottom: 0;
}
.dummy h4 {
    font-size: 16px;
    padding-bottom: 10px;
}

＆＃13;

<div class="section-inner"> 
 <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->
</div>

＆＃13;

感谢任何形式的帮助。提前谢谢。

Answer 1

你想要这样的东西吗？

问题是display：none，这导致了转换问题。我添加了一个额外的过渡来显示变化。此外，由于您使用的是绝对定位，因此无需提及width，您只需定义left和right位置，而不是使用display:none属性，如何转到visibility:hidden和visibility:visible，如我在下面的CSS类中所示。

<强> CSS：

.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}

<强>段：

.section-inner {
    width: 440px;
    margin: 0 auto;
}
.grid-img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.grid-img {
    background-color: #ffffff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    display: inline-block;
    margin-right: 50px;
    transition: all 0.8s ease-in-out;
}
.profile img {
    width: 150px;
    height: auto;
}
.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}
.dummy {
    position: absolute;
    bottom: 0;
}
.dummy h4 {
    font-size: 16px;
    padding-bottom: 10px;
}

<div class="section-inner"> 
 <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->
</div>

Answer 2

你可以使用

.img-caption {
   top: 10px;
   left: 5%;
   z-index: -1;
   height: 0%;
   position: absolute;
   width: 90%;
   border: 4px solid gray;
   transition: all 0.8s ease-in-out;
  }

在悬停高度过渡不起作用

2 个答案: