帶覆蓋效果的圖像CSS上的文字

Question

我試圖將某些內容放在具有某些覆蓋效果的圖像上，但它不會根據我的需要顯示輸出。我也不知道如何做覆蓋效果，任何人都可以幫助我。

.destination { 
 
    padding: 20px; 
 
    -ms-transform: translate(0, 0); 
 
    -webkit-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
    transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
} 
 
.destination h3 { 
 
    font-size: 25px; 
 
    color: #fff; 
 
    line-height: 20px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 10px; 
 
} 
 
.destination span { 
 
    display: block; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    line-height: 16px; 
 
} 
 
.overlay-leftTop { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9; 
 
    transition: all .3s ease; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
} 
 
.destinationmask { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 5; 
 
    opacity: 0.4; 
 
    filter: alpha(opacity=50); 
 
    background: #000; 
 
}

<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/> 
 
<a href="" class="overlay-leftTop"> 
 
    <div class="table-display"> 
 
     <div class="table-cell table-cell-bottom"> 
 
      <div class="destination"> 
 
       <h3>TEST</h3> 
 
       <span>Check,check1,check2</span> 
 
      </div> 
 
     </div> 
 
    </div>

其實我需要這樣的東西this

Answer 1

我覺得這是ü想要什麼。

.destination { 
 
     padding: 20px; 
 
     -ms-transform: translate(0, 0); 
 
     -webkit-transform: translate(0, 0); 
 
     transform: translate(0, 0); 
 
     transition: all .5s ease; 
 
     -ms-transition: all .5s ease; 
 
     -webkit-transition: all .5s ease; 
 
    } 
 
    .destination h3 { 
 
     font-size: 25px; 
 
     color: #fff; 
 
     line-height: 20px; 
 
     text-transform: uppercase; 
 
     margin-bottom: 10px; 
 
    } 
 
    .destination span { 
 
     display: block; 
 
     font-size: 15px; 
 
     color: #fff; 
 
     line-height: 16px; 
 
    } 
 
    .overlay-leftTop { 
 
     display: block; 
 
     position: relative; 
 
     text-decoration: none; 
 
     width: 300px; 
 
     height: 300px; 
 
     z-index: 9; 
 
     transition: all .3s ease; 
 
     -webkit-transition: all .3s ease; 
 
     -moz-transition: all .3s ease; 
 
    } 
 
    .overlay-leftTop:before { 
 
     content: ''; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     opacity: 1; 
 
     background: rgba(0,0,0,0.3); 
 
     transition: all .3s ease; 
 
     -webkit-transition: all .3s ease; 
 
     -moz-transition: all .3s ease; 
 
     
 
    } 
 
    .overlay-leftTop:hover { 
 
     text-decoration: none; 
 
    } 
 
    .overlay-leftTop:hover:before { 
 
     background: rgba(0,0,0,0.5); 
 
    } 
 
    .destinationmask { 
 
     width: 100%; 
 
     height: 100%; 
 
     z-index: 5; 
 
     opacity: 0.4; 
 
     filter: alpha(opacity=50); 
 
     background: #000; 
 
    } 
 
    .view-btn{ 
 
      position: absolute; 
 
     top: 180px; 
 
     font-size: 16px !important; 
 
     border: 2px solid #fff; 
 
     display: inline-block !important; 
 
     text-align: center; 
 
     padding: 10px 15px; 
 
     opacity: 0; 
 
     transition:all 350ms ease 0s; 
 
    } 
 
    .overlay-leftTop:hover .view-btn{ 
 
     opacity:1; 
 
    }

<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');"> 
 
     <div class="table-display"> 
 
     <div class="table-cell table-cell-bottom"> 
 
      <div class="destination"> 
 
      <h3>TEST</h3> 
 
      <span>Check,check1,check2</span> 
 
    <span class="view-btn">View More</Span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </a>

Answer 2

您應該使用CSS background-image屬性，而不是<img>標籤。對於效果，使用像:before這樣的僞元素。

在下面的代碼片段看一看：

.destination { 
 
    padding: 20px; 
 
    -ms-transform: translate(0, 0); 
 
    -webkit-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
    transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
} 
 
.destination h3 { 
 
    font-size: 25px; 
 
    color: #fff; 
 
    line-height: 20px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 10px; 
 
} 
 
.destination span { 
 
    display: block; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    line-height: 16px; 
 
} 
 
.overlay-leftTop { 
 
    display: block; 
 
    position: relative; 
 
    text-decoration: none; 
 
    width: 300px; 
 
    height: 300px; 
 
    z-index: 9; 
 
    transition: all .3s ease; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
} 
 
.overlay-leftTop:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    background: rgba(0,0,0,0.3); 
 
    transition: all .3s ease; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    
 
} 
 
.overlay-leftTop:hover { 
 
    text-decoration: none; 
 
} 
 
.overlay-leftTop:hover:before { 
 
    background: rgba(0,0,0,0.5); 
 
} 
 
.destinationmask { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 5; 
 
    opacity: 0.4; 
 
    filter: alpha(opacity=50); 
 
    background: #000; 
 
}

<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');"> 
 
    <div class="table-display"> 
 
    <div class="table-cell table-cell-bottom"> 
 
     <div class="destination"> 
 
     <h3>TEST</h3> 
 
     <span>Check,check1,check2</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</a>

希望這有助於！

Answer 3

請試試這個。我加入了一些CSS：

.img-wrap { 
    display: inline-block; 
    position: relative; 
    width: 386px; 
} 
.img-box:before { 
    position: absolute; 
    content: ""; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.4); 
    transform:scale(0); 
    transition: all .5s ease; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
} 
.img-wrap:hover .img-box:before { 
    transform:scale(1); 
} 
.img-wrap:hover .overlay-leftTop{ 
    opacity:1; 
} 
img { 
    height: auto; 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    display: block; 
} 

.destination { 
 
    padding: 20px; 
 
    -ms-transform: translate(0, 0); 
 
    -webkit-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
    transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
} 
 
.destination h3 { 
 
    font-size: 25px; 
 
    color: #fff; 
 
    line-height: 20px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 10px; 
 
} 
 
.destination span { 
 
    display: block; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    line-height: 16px; 
 
} 
 
.overlay-leftTop { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity:0; 
 
    transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
} 
 
.img-wrap { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 386px;  
 
} 
 
.img-box:before { 
 
    position: absolute; 
 
    content: ""; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.4); 
 
    transform:scale(0); 
 
    transition: all .5s ease; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
} 
 
.img-wrap:hover .img-box:before { 
 
    transform:scale(1); 
 
} 
 
.img-wrap:hover .overlay-leftTop{ 
 
    opacity:1; 
 
} 
 
img { 
 
    height: auto; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    width: auto; 
 
    display: block; 
 
}

<div class="img-wrap"> 
 
    <div class="img-box"> 
 
    <img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/> 
 
    </div> 
 
    <a href="" class="overlay-leftTop"> 
 
    <div class="table-display"> 
 
     <div class="table-cell table-cell-bottom"> 
 
      <div class="destination"> 
 
       <h3>TEST</h3> 
 
       <span>Check,check1,check2</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>