在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

您可以在CSS 中使用+ 选择器，我也可以在Banner本身中添加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>