HTML 鼠标移动到图片时遮住图形

Question

这是我想要的效果：

我是第一次做网站，所以我是用网站的模板修改代码。图的原代码是：

<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, 101, 0.6);
                color: #ffffff;
                opacity: 0;
            }
            .mask h3 {
                text-align: center;
            }
            </style>
    </div>
</div>

谁能帮帮我？

Answer 1

   <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>

Answer 2

/*  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,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,0,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;
}
</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 鼠标移动到图片时遮住图形

HTML mask the figure when the mouse move to the picture

html

mask