使用HTML和CSS创建图像叠加悬停

最新推荐文章于 2023-03-05 09:46:14 发布

X W F

最新推荐文章于 2023-03-05 09:46:14 发布

阅读量294

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46399258/article/details/106991808

版权

这篇博客介绍了如何使用CSS创建图像叠加悬停效果。通过设置容器和覆盖层的样式，使得覆盖层在鼠标悬停时从不同方向淡入显示，提供了一种增强用户体验的方法。文章提供了四种类型的叠加层效果：左侧、右侧、顶部和底部，详细解释了相应的CSS代码实现。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Image Overlay</title> 
</head> 

<body> 
    <center> 
        <h1 class="title"> 
    GeeksforGeeks 
    </h1> 
        <b>Image Overlay</b> 
        <br> 
        <br> 
        <div class="container"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"
                class="image"> 
            <div class="overlay overlayLeft"></div> 
        </div> 
    </center> 
</body> 

</html>

CSS代码：设置容器相对于其正常位置的位置，并定义其宽度和高度。使覆盖层起作用的关键是将其位置设置为绝对位置。这意味着其相对于其最接近的祖先的位置，在这种情况下是图像。

因此，覆盖层并不总是存在，而是仅在用户将鼠标悬停在图像上方时显示，将其不透明度设置为零，表示完全透明。

使用“背景颜色”设置叠加层的颜色。使用“过渡”，以便逐渐显示叠加层，而不是在图像上弹出。由于我们将叠加层的不透明度设置为零，因此当我们将鼠标悬停在容器上时，我们希望将不透明度设置为1。

这意味着，一旦用户将鼠标悬停在容器项上，叠加层就会出现。

<style> 
    body {
    
        text-align: center; 
    } 

    h1 {
    
        color: green; 
    } 

    .container img {
    
        width: 250px; 
        height: 250px; 
    } 

    .container {
    
        position: relative; 
        width: 400px; 
        height: auto; 
    } 
</style>

淡入叠加：叠加的宽度和高度等于div图像的宽度和高度。将鼠标悬停在图像上后，叠加层将显示在该图像的顶部。

代码：

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Image Overlay</title> 
    <style> 
        body {
    
            text-align: center; 
        } 

        h1 {
    
            color: green; 
        } 

        .container img {
    
            width: 250px; 
            height: 250px; 
        } 

        .container {
    
            position: relative; 
            width: 400px; 
            height: auto; 
        } 

        .overlay {
    
            position: absolute; 
            transition: all 0.3s ease; 
            opacity: 0; 
            background-color: #9bcd9b; 
        } 

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

        .overlayFade {
    
            height: 250px; 
            width: 250px;