[英]Image overlay on hover
我正在尝试在图像上显示覆盖图。 但是我不知道如何使该图像悬停在现有图像上。 我尝试更改z-index,位置,但未显示叠加层。 我是CSS的新手,请尝试帮助我解决这个问题。
HTML:
<section class="home-item">
<article class="home-item" data-category="RS">
<div class="box">
<div class="overlay">
<a href="#">
<span class="boximg" id="home">
<img width="403px" height="270" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg"/>
</span>
</a>
</div>
<br>
<p id="caption">St. Ruperts Residence</p>
</div>
</article>
</section>
CSS:
.box {
max-width: 403px;
color: #000 !important;
position:relative;
padding:0;
margin-bottom:0px;
}
.box > a
.box span,
.box img {
display:block;
}
#caption {
width: 403px;
font-size: 15px;
text-decoration: none;
margin: -15px 0 40px 5px !important;
font-weight: 600;
font-family:Roboto !important;
}
.boximg {
width: auto;
max-width: 100%;
}
.box:hover {
width: auto;
max-width: 450px;
color: #fff !important;
z-index:2;
background-color:#000;
}
.home-item{
width:403px;
}
.home-item:hover .overlay{
background-image:url('https://www.ixds.com/system/files/media-images/pre-work-talk-polygone-012x_0.png');
position:relative;
z-index:9999999999999999999;
display:block;
}
请查看https://jsfiddle.net/6vrcv9kk/1/
谢谢堆!
您可以通过html制作。存在一些html标记错误,因此我也纠正了结构。
.box { max-width: 403px; color: #000 !important; position:relative; padding:0; margin-bottom:0px; } .box > a .box span, .box img { display:block; } #caption { width: 403px; font-size: 15px; text-decoration: none; margin: -15px 0 40px 5px !important; font-weight: 600; font-family:Roboto !important; } .overlay .hover { position: absolute; top: 0; left: 0; } .boximg { /* width: auto; max-width: 100%; */ display: block; height: 270px; } .box:hover img { display: none; height: 270px; object-fit: cover; } .box:hover .hover { display: block; } .home-item{ width:403px; }
<section class="home-list"> <article class="home-item"> <div class="box"> <div class="overlay"> <a href="#"> <span class="boximg" id="home"> <img width="403px" height="270" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg" /> <img class="hover" width="403px" height="270" src="https://www.ixds.com/system/files/media-images/pre-work-talk-polygone-012x_0.png" /> </span> </a> </div> <br> <p id="caption">St. Ruperts Residence</p> </div> </article> </section>
试试这个,希望对您有帮助:
<section class="home-item">
<article class="home-item" data-category="RS">
<div class="box" >
<div class="overlay">
<a href="#">
<span class="boximg" id="home"><img width="403px" height="270" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg" /></span></a>
</div>
<br>
<p id="caption">St. Ruperts Residence</p>
</article>
<style>
.box {
max-width: 403px;
color: #000 !important;
position:relative;
padding:0;
margin-bottom:0px;
}
.box > a
.box span,
.box img {
display:block;
}
#caption {
width: 403px;
font-size: 15px;
text-decoration: none;
margin: -15px 0 40px 5px !important;
font-weight: 600;
font-family:Roboto !important;
}
.boximg {
width: auto;
max-width: 100%;
}
.box:hover {
width: auto;
max-width: 450px;
color: #fff !important;
z-index:2;
background-color:#000;
opacity: 0.3;
}
.home-item{
width:403px;
opacity: 1;
}
/*.home-item:hover .overlay{
background-image:url('https://www.ixds.com/system/files/media-images/pre-work-talk-polygone-012x_0.png');
position:relative;
z-index:9999999999999999999;
display:block;
}*/
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.