オーバーレイ効果を使用した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>

は、実際に私はあなたが background-image CSSプロパティの代わりに、 <img>タグを使用する必要があります this

Answer 1

私は、これはuが欲しいものだと思います。

.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

ようなものが必要。また、エフェクトでは: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>