user2987377 user2987377 - 2 months ago 23
CSS Question

Scale CSS transition cancel other styling out

I have created an image overlay which activate on mouse hover with dark transparent background and some text. I also want the image to expand on mouse hover. Example - https://jsfiddle.net/tsusycb9/

So I have added the following css

.pagewrap a img {transition: all .5s ease-in-out;
}

.pagewrap a:hover img {
transform: scale(1.15);
}


As far as making the image scale it works fine but this then cancels out the dark transparent overlay background when the mouse is hovered. Example - https://jsfiddle.net/yg4fw4zh/

I cannot get the two effect working in conjunction with each other.

Answer

Just add a z-index to the overlay

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

Also add the same to the overlay pseudo-element

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