鼠标滑过图片，图片上出现一个遮罩层并显示图片的提示文字

最新推荐文章于 2024-01-18 15:38:53 发布

转载最新推荐文章于 2024-01-18 15:38:53 发布 · 2.2k 阅读

文章标签：

#css

本文介绍如何使用HTML和CSS实现图片在鼠标悬停时显示新闻标题的动态效果，详细解析了代码结构和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html的内容：

             <a href="#">
                <div class="img"><img src="img/6.jpg" alt="img"></div> //图片
                <div class="info">       //提示文字
                        <h3>这里是新闻标题简要介绍一下吗</h3>
                </div>
             </a>
  </div>

样式设置如下：

//首先确定遮罩层的大小

.ih-item{
    position: relative;
    width: 220px;
    height: 220px;
    }

//首先确定遮罩层中图片的大小

.ih-item .img img{
    position: relative;
    width: 220px;
    height: 220px;
    max-width: 100%;
    }

提示文字

.ih-item .info {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;/* 隐藏旋转元素的背面*/
    backface-visibility: hidden;
    background: rgba(0, 0, 0, 0.6);   /*后面这个0.6是指的背景的透明度*/
    opacity: 0;
    -webkit-transition: all 0.35s ease-in-out;   /*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

最最重要的来了，鼠标化划过的时候刚开始info是opacity: 0;现在透明底变成1就显示出来了

.ih-item a:hover .info {
opacity: 1; /*有opacity有0变成1*/
}
---------------------
作者：夏天想
来源：优快云
原文：https://blog.youkuaiyun.com/qq_33769914/article/details/51960278
版权声明：本文为博主原创文章，转载请附上博文链接！