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;
}

同样将其添加到overlay伪元素

.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>

缩放CSS转换取消其他样式

1 个答案: