缩放CSS过渡，取消其他样式

Question

我已经创建了一个图像覆盖，在鼠标悬停时激活深色透明背景和一些文本。我还希望图像在鼠标悬停时展开。示例- https://jsfiddle.net/tsusycb9/

所以我添加了下面的css

.pagewrap a img {transition: all .5s ease-in-out;
}
.pagewrap a:hover img {
  transform: scale(1.15);
}

就使图像缩放而言，它工作得很好，但是当鼠标悬停时，这会抵消黑暗透明的覆盖背景。示例- https://jsfiddle.net/yg4fw4zh/

我无法让这两种效果一起工作

Answer 1

添加一个z-index到叠加

.caption-overlay {
  position: absolute;
  bottom: 0;
  color: white;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: -webkit-transform .35s ease-out;
  transition: transform .35s ease-out;
  z-index: 1;
}

也添加相同的叠加伪元素

.caption:hover::before {
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}

h2 {
  font-size: 24px;
  line-height: 33px;
  margin-bottom: -20px;
}
.title-line {
  border-top: 1px solid;
  width: 100%;
}
/* PORTFOLIO */
.portfolio-wrapper {
  font-size: 0;
}
.portfolio-wrapper img {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  background: #ccc;
}
.square {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background-color: #1e1e1e;
  overflow: hidden;
}
.caption {
  position: absolute;
  height: 90%;
  width: 90%;
  padding: 5%;
}
.caption-overlay {
  display: table;
  width: 90%;
  height: 100%;
}
.caption-content {
  color: white;
}
.caption::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  transition: background .35s ease-out;
}
.caption:hover::before {
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}
.pagewrap a img {
  transition: all .5s ease-in-out;
}
.pagewrap a:hover img {
  transform: scale(1.15);
}
.caption-image {
  display: block;
  min-width: 100%;
  max-width: 100%;
  height: auto;
}
.caption-overlay {
  position: absolute;
  bottom: 0;
  color: white;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: -webkit-transform .35s ease-out;
  transition: transform .35s ease-out;
  z-index: 1;
}
.caption:hover .caption-overlay {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.caption-line {
  border-top: 1px solid white;
  width: 100%;
}

<section class="pagewrap">
  <div class="portfolio-wrapper">
    <a href="#">
      <div class="square">
        <div class="caption">
          <img class="caption-image" src="http://placehold.it/350x350" alt="#" />
          <div class="caption-overlay">
            <h2 class="caption-content">
                    Title
                    <hr class="caption-line">
                    blah, blah, blah, blah
                </h2>
          </div>
        </div>
      </div>
    </a>
  </div>
</section>