[英]Text over image css with overlay effect
我试图将一些内容放在具有一些叠加效果的图像上,但它没有根据我的需要显示输出。 另外我不知道如何做叠加效果任何人都可以帮助我。
.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>
标签。 对于效果,请使用像: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>
希望这可以帮助!
请试试这个。 我添加了一些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>
我想这就是你想要的。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.