在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

您可以使用+ WM_ERASEBKGND ，我也将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>