在 x 属性上显示带有转换的隐藏 div

Question

我有一张图片，然后是图片下方的横幅。当你将鼠标悬停在图像上时，我让它在 y 轴上向上移动 100px。我想不通的是如何在将鼠标悬停在图像上时将横幅带上 y 轴。我不确定这是我尝试执行悬停的方式还是什么。

有人看到我做错了什么吗？

.project-block {
  width: 33.33333333333333333333333333%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
}
.project-block img {
  width: 100%;
  height: 300px;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  position: relative;
}
.project-block img:hover {
  transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}
.project-block-banner {
  position: relative;
  width: 100%;
  height: 100px;
  bottom: -.01;
  background: #00a16d;
}
.project-block img:hover.project-block-banner {
  transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

<div class="project-block">
  <a href="projects/eslich-wrecking">
    <img src="images/work/eslich.jpg" alt="">
    <div class="project-block-banner">
      <div class="project-block-banner-container">
        <div class="project-block-banner-name">company</div>
        <div class="project-block-banner-description">htrhr ghrth ht</div>
      </div>
    </div>
  </a>
</div>

Answer 1

您可以使用 + selector in CSS，我还为横幅本身添加了 transition-duration。

.project-block {
 width: 33.33333333333333333333333333%;
 height: 100%;
 display: inline-block;
 overflow: hidden;
}
.project-block img {
 width: 100%;
 height: 300px;
 -webkit-transition-duration: .5s;
    transition-duration: .5s;
 position: relative;
}
.project-block img:hover {
 transform: translate(0, -100px);
 -webkit-transform: translate(0, -100px);
 -webkit-transition-duration: .5s;
    transition-duration: .5s;
}
.project-block-banner {
 position: relative;
 width: 100%;
 height: 100px;
 bottom: -.01;
 background: #00a16d;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}
.project-block img:hover + .project-block-banner {
 transform: translate(0, -100px);
 -webkit-transform: translate(0, -100px);
 -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

<div class="project-block">
  <a href="projects/eslich-wrecking">
    <img src="images/work/eslich.jpg" alt="">
    <div class="project-block-banner">
      <div class="project-block-banner-container">
        <div class="project-block-banner-name">ESLICH WRECKING</div>
        <div class="project-block-banner-description">htrhr ghrth ht</div>
      </div>
    </div>
  </a>
</div>

在 x 属性上显示带有转换的隐藏 div

Displaying a hidden div with a transition on the x property

html

css

css-transitions

css-transforms

在 x 属性 上显示带有转换的隐藏 div

Displaying a hidden div with a transition on the x property

html

css

css-transitions

css-transforms

在 x 属性上显示带有转换的隐藏 div