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