在 x 属性上显示带有过渡的隐藏 div答案

【问题标题】：Displaying a hidden div with a transition on the x property在 x 属性上显示带有过渡的隐藏 div
【发布时间】：2016-10-26 08:33:59
【问题描述】：

我有一张图片，然后是图片下方的横幅。当你将鼠标悬停在图像上时，我让它在 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>

【问题讨论】：

你会用 JavaScript 吗？
我不想这样做，但如果必须的话，我会的。

标签： html css css-transitions css-transforms

【解决方案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>

【讨论】：