html+css鼠标悬停图片上显示文字

最新推荐文章于 2024-07-19 13:00:00 发布
最新推荐文章于 2024-07-19 13:00:00 发布
阅读量8.3k 收藏 44
点赞数 8
文章标签： html css tensorflow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x2045306366/article/details/134188041
版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己试着做做</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="image-container">
        <img src="1.jpg" alt="图片加载失败">
        <div class="overlay">这是小猫</div>
    </div>

</body>
</html>

css

.image-container{
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
}

.image-container img{
    width: 100%;
    height: 100%;
}

.overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    color: black;
    /* 字体居中 */
    transform: translate(-50%,-50%);
    font-size: large;
    /* 悬停前完全透明 */
    opacity: 0;
    transition: 0.3s ease-in-out; 
}

.image-container:hover .overlay{
    transition: 0.3s ease-in-out;
    /* 悬停时完全不透明 */
    opacity: 1;
}

效果展示

未悬停：

悬停时：

椿xx
关注
  • 8
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML-鼠标悬浮文案效果
Bruce__taotao的博客
01-15 6303
有时候，我们浏览网站时，鼠标停留在某处后鼠标会提示一些文案。以上就是今天的内容了，简单地讨论hover方式，tiltle 属性方式来实现鼠标悬浮效果。
5种CSS3鼠标悬停图片显示文字信息
ICode联盟
12-13 2645
5种CSS3鼠标悬停图片显示文字信息是一款鼠标悬停特效，含5种不同风格的鼠标悬停图片显示文字信息。
文字溢出隐藏及鼠标悬停显示效果
最新发布
weixin_58462329的博客
07-19 451
在本文中，我们将学习如何使用 CSS 和 JavaScript 实现一个简单的文字溢出隐藏效果，当鼠标悬停在文本上时显示完整内容。
HTML鼠标悬停显示文字
weixin_64751563的博客
12-17 3512
HTML鼠标悬停显示文字
鼠标悬停动态提示显示文字或者图片实例
01-03
前台代码实例,鼠标悬停在图片等标签上动态提示显示文字或者图片实例
DIV CSS鼠标经过悬停在图片上时图片上方显示文字
学无止境
07-12 1万+
纯div+css实现第一张图片没有文字内容，鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理： 首先我们设置一个盒子对象，并且将图片使用style标签内设置为CSS背景图片，同时设置该对象html a超链接display:none隐藏，该超链接锚文本内放好文字内容，最后设置鼠标悬停经过整个对象时候显示超链接内容。 需要注意是，我们使用了css
js鼠标悬停到图片上显示文字详情效果
06-27
在JavaScript（JS）编程中，实现“鼠标悬停到图片上显示文字详情效果”是一种常见的交互设计技术，它能够提升用户体验，使用户更容易理解图片所代表的信息。这种效果通常是通过结合HTML、CSS以及JavaScript来实现的...
CSS3鼠标悬停图片上浮显示描述特效代码
03-20
这种特效在鼠标悬停到图片上时，图片会向上平滑移动，同时在图片下方显示出隐藏的描述文字，增加了用户浏览网页的互动体验。 在CSS3中，我们主要利用以下几个关键属性来实现这一效果： 1. `transition`：这个属性...
js和CSS3鼠标悬停超链接展示图片特效
12-11
例如，当鼠标悬停到超链接上时，可以使用`transition`属性控制图片的渐入效果： ```css .hover-img { opacity: 0; transition: opacity 0.5s ease-in-out; } .hover-img:hover { opacity: 1; } ``` 这里的`...
CSS3的鼠标悬停图片显示文字动画特效.zip
07-11
本资源“CSS3的鼠标悬停图片显示文字动画特效”正是一种利用CSS3特性实现的创新交互设计，当用户将鼠标悬停在图片上时，标题文字会以动态的方式滑动显示出来，增加了用户体验的趣味性和吸引力。 这个特效的核心在于...
CSS3实现鼠标悬停图片显示文字动画特效.zip
07-11
</head> <body>[removed][removed]               Lorem ipsum.             More lorem ipsum bacon ipsum.       Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken         meatloaf. Flank sirloin strip steak prosciutto kevin turducken.             这是一款好看的鼠标移动到图片上面的时候滑动显示出标题文字信息的CSS3鼠标悬停图片显示文字动画特效。
鼠标悬停在图片上显示文字提示的特效代码
11-24
鼠标悬停在图片上显示文字提示的特效代码
CSS3鼠标悬停图片遮罩显示图标和文字动画特效
06-10
【CSS3鼠标悬停图片遮罩显示图标和文字动画特效】是一种常见的网页设计技术，它利用CSS3的强大功能，为用户交互提供丰富的视觉体验。在网页中，当鼠标指针悬停在图片上时，会触发一个遮罩层，遮罩层上通常会显示图标...
【HTML】HTML 鼠标悬停于图片显示文字
热门推荐
symsmile
01-21 3万+
在 img 元素中添加 title 属性：
用HTML和CSS实现华为新闻效果——鼠标悬停时图片缩放并且文字上升
m0_65290003的博客
10-12 3290
先用定位（父相子绝），将bottom设置为负值，让最后一排文字超出盒子的范围，并在盒子的父级（即：.dec）添加overflow: hidden将文字进行隐藏。因为遮罩用了after伪元素，所以会压住txt和img，所以想让txt压在遮罩上面，需要设置z-index值（默认值为0，取值越大，层级越高）这里是使用scale使图片达到放大的效果，括号中的参数即为图片的放大倍数，也可以在img上添加过渡效果，让缩放更为柔和。同样使用伪类选择器hover，在鼠标悬停时设置文字样式。），在鼠标悬停时设置图片样式。
html鼠标悬停图片释义文字消失,鼠标悬停，在图片上显示文字~
weixin_32503491的博客
06-03 1869
面向对象function $(id){return typeof id === "string" ? document.getElementById(id) : id;}function $$(oParent, elem){return (oParent || document).getElementsByTagName(elem);}function imgLight(id){this.oDiv...
vue 鼠标悬停图片时显示说明文字
weixin_42610010的博客
01-11 2743
在 Vue 中使用鼠标悬停显示说明文字可以使用 v-bind 指令绑定一个 title 属性到图片元素上。 例如： <template> <img v-bind:title="description" src="image.jpg" alt="image"> </template> <script> export default { dat...
html 鼠标放上显示文字,html鼠标悬停提示文字
weixin_33355385的博客
06-07 1万+
一、超链接A标签悬停展示翰墨很容易对a标签内问鼎title属性便可。模式超链接上鼠标悬停默示笔墨的配置以上即对超链接a配置title。扩展阅读学习：《html超链接a标签》二、悬停img图片标签提醒展现翰墨alt设置装备摆设描画文字，鼠标悬停图片上时将透露表现alt设置装备摆设的翰墨内容，当鼠标移到开后文字提示失落，而alt是具有图片刻划属性的遵命，但那会主流阅读器中img图片即便设置alt，鼠标...
当鼠标悬浮到场景图片上面有文字 ##
qq_33759361的博客
05-28 565
当鼠标悬浮到场景图片上面有文字 需要实现的功能 初始样子 ​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U4c75eua-1622210746039)(C:\Users\29966\Desktop\krpano\image-20210528170745344.png)] 实现的功能 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jC5AFZ1N-1622210746042)(C:\Users\29966\Desktop\krpano
静态网页html图片轮播鼠标悬停图片上显示文字
09-08
在静态网页中实现图片轮播并让鼠标悬停在图片上显示文字是很常见的功能。要实现这个功能，可以借助HTML、CSS和JavaScript来完成。 首先，在HTML中创建一个包含图片和文字的容器，可以使用div元素来设置，如下所示： ```html <div class="slider"> <img src="image1.jpg" alt="Image 1"> <div class="caption">文字说明1</div> </div> ``` 然后使用CSS样式设置容器的尺寸和样式，并隐藏文字说明： ```css .slider { width: 400px; height: 300px; position: relative; } .slider .caption { display: none; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 5px 10px; font-size: 16px; } ``` 接下来，使用JavaScript来实现鼠标悬停时显示文字说明的功能。可以使用事件监听器来实现，如下所示： ```javascript document.querySelector('.slider').addEventListener('mouseover', function() { this.querySelector('.caption').style.display = 'block'; }); document.querySelector('.slider').addEventListener('mouseout', function() { this.querySelector('.caption').style.display = 'none'; }); ``` 以上代码意味着当鼠标悬停在.slider元素上时，会显示.caption元素；当鼠标移出时，会隐藏.caption元素。 最后，在HTML中引入CSS和JavaScript文件： ```html <head> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> ``` 这样，当浏览器打开页面时，就会显示图片轮播，并且当鼠标悬停在图片上时会显示文字说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值