当鼠标移到图片上时，HTML会掩盖图形

2024-05-19 • 问答

这是我想要的效果：

这是我第一次创建网站，所以我正在使用网站中的模板并修改代码。图的原始代码为：

<div class="content">
    <div class="media"> 
    <a href="images/fulls/01.jpg"><img src="images/home/01.jpg" alt="" title="This right here is a caption." /></a>     
    </div>
....
</div>

我已经尝试过了，但是没有用：

<div class = "img_div">
    <div class="media">
        <img src="images/home/01.jpg">

            <a href="images/fulls/01.jpg">
                <div class="mask">
                <h3>A Picture of food</h3>
                    </div>
            </a>
            <style>
            .img_div {
                margin: 20px 400px 0 400px;
                position: relative;
                width: 531px;
                height: 354px;
            }
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 531px;
                height: 354px;
                background: rgba(101,101,0.6);
                color: #ffffff;
                opacity: 0;
            }
            .mask h3 {
                text-align: center;
            }
            </style>
    </div>
</div>

有人可以帮助我吗？

   <div class = "img_div">
        <div class="media">
                 <a href="#"> 
                      <h3>A Picture of food</h3>
                      <span class="mask"> </span>
                      <img src="images/home/01.jpg">
                 </a>
         </div>
    </div> 

<style>
.media {
    position: relative;
    width: auto;
    display: inline-block;
}

 span.mask {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #3a3a3a99;
    right: 0;
    left: 0;
    opacity: 0;
}
   .media:hover .mask { 
        opacity: 1;
    }
    h3{
        position: absolute;
        top:10%;
        right: 0;
        left: 0;
        margin: auto;
        opacity: 0;
        text-align: center;
        color: #fff;
    }
    .media:hover h3{ 
        opacity: 1;
    }

</style>

/*  Your style.css file  */

.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgb(0,0.4);
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<p>Hover over the image to see the effect.</p>

<div class="container">
<img src="https://i.stack.imgur.com/XZ9UB.jpg" alt="" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>

</body>
</html>

这是对您的问题的更好解决方案。来源并根据您的图像需求进行了调整：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

由于您是初学者，因此欢迎来到网站开发人员世界！

您可以在https://www.w3schools.com上找到最新的设计解决方案。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<style>
.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgb(0,-50%);
text-align: center;
}
</style>

<p>Hover over the image to see the effect.</p>

<div class="container">
<img src="images/home/01.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>

</body>
</html>

当鼠标移到图片上时，HTML会掩盖图形

wangdaren1 回答：当鼠标移到图片上时，HTML会掩盖图形

大家都在问