鼠标经过渐变显示文字，隐藏图片

最新推荐文章于 2021-12-10 15:40:55 发布
最新推荐文章于 2021-12-10 15:40:55 发布
阅读量2.1k 收藏
点赞数
分类专栏： 网站建设
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freejs/article/details/17553445
版权

鼠标经过渐变显示文字，隐藏图片

鼠标经过渐变显示文字，隐藏图片
演示

 

XML/HTML Code
  1. <div class="item">  
  2.     <a href="#"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a>  
  3.     <div class="caption">  
  4.         <a href="">Cycliner</a>  
  5.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
  6.     </div>  
  7. </div>  
  8.   
  9. <div class="item">  
  10.     <a href="#"><img src="2.gif" alt="Banana Moon" title="" width="125" height="125"/></a>  
  11.     <div class="caption">  
  12.         <a href="">Banana Moon</a>  
  13.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>    </div>  
  14. </div>  
  15.   
  16. <div class="item">  
  17.     <a href="#"><img src="3.gif" alt="BlueBuck" title="" width="125" height="125"/></a>  
  18.     <div class="caption">  
  19.         <a href="">BlueBuck</a>  
  20.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
  21.     </div>  
  22. </div>  
  23.  
 

原文地址: http://www.freejs.net/article_jquerywenzi_119.html
piperzero
关注
专栏目录
css3动画鼠标经过图片文字动画特效
08-05
结合这两个技术，我们可以创建更复杂的鼠标经过动画效果，如图片旋转、文字淡入淡出、颜色渐变等。例如，我们可以为图片添加旋转动画，并在鼠标悬停时显示文字： ```html 图片"> 这里是文字描述 .image-...
CSS 实现鼠标触碰完成渐变切换
qq_52712971的博客
01-03 1221
CSS实现图像过渡
鼠标滑过图片渐变大小显示
专注前端开发
12-04 267
  代码不多，但是效果很炫，我根据曾经看过的flash的效果模拟的 var gradual={}; gradual.ImagesView=function(options){ var defaults={ applyTo:null, minWidth:null, maxWidth:null }; this.o...
css3 鼠标hover事件背景颜色渐变
热门推荐
天下大师傅
07-12 2万+
由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。 *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px;
利用CSS3渐变与变量实现按钮鼠标悬停特效
guoxiaozhuang4的博客
05-14 1756
1. 公众号中发现，实现效果如下2. 代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .btn { tex
30款css3实现的鼠标经过图片显示描述特效
05-15
5. **渐变背景**: 鼠标悬停时，图片背景色或边框产生渐变变化，同时显示描述，增加视觉层次感。 6. **弹出框**: 图片下方或侧面弹出一个包含描述的框，可以是矩形、圆形或其他形状。 7. **动画路径**: 文字描述沿着...
CSS3鼠标经过文字分裂特效.zip
07-04
这个“CSS3鼠标经过文字分裂特效.zip”压缩包包含了一个利用CSS3技术实现的独特文字特效，特别是当鼠标悬停在文本上时，文字会呈现出斜线切割两断的动态效果。这种效果通常可以吸引用户注意力，增加交互性，提升网页...
CSS3悬停图片文字遮罩特效
06-24
文字遮罩是将文本覆盖在图片上，通常采用透明度或颜色渐变作为遮罩，以部分或全部隐藏图片。这样，当鼠标悬停时，遮罩层的透明度发生变化，文字就会逐渐显现，从而形成一种视觉上的动态效果。 实现这个特效的关键...
CSS3动画悬停显示文字特效
06-24
本文将详细讲解如何利用CSS3来创建一个动态的“悬停显示文字”特效，当用户将鼠标指针悬停在图片上时，文字标题会滑动显示出来，为网站增加交互性和吸引力。 首先，我们需要一个HTML结构，它通常包含一个`<img>`...
jQuery网页文字滑动、滚动、渐变等切换效果
01-30
jQuery文字滑动切换动画效果 jQuery文字渐变切换动画效果 类似洗牌效果的文字切换js代码特效
漂亮鼠标经过渐变效果
06-25
漂亮鼠标经过渐变的一个效果 超链接变化效果
CSS3鼠标滑过渐变颜色旋转图标特效
魅网工作室的专栏
02-29 867
CSS3鼠标滑过渐变颜色旋转图标特效 *{margin: 0;padding: 0;list-style: none;} #order_nav {  position: relative; background: #fff; position: relative; } #order_nav .list { width: 936px; margin: 0 auto; } #order_n
css3 鼠标经过颜色渐变
weixin_30746117的博客
01-28 354
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .hover { ...
利用css变量去实现渐变的跟随鼠标
QYThh的博客
12-10 581
效果展示 原理： 1、CSSStyleDeclaration.setProperty() CSSStyleDeclaration.setProperty()提供了可以直接修改CSS属性值的能力。当然也支持修改CSS中的变量。 :root { --color: red; } div { color: var(--color); } <div>div</div> 此时的字体颜色是红色 执行document.b
css有关鼠标移动上去图片变透明度变化
自强不息
08-27 577
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
js文字特效(鼠标放上去,颜色渐变,酷)
大树下那片阴凉
09-02 2723
test.jsp    pageEncoding="UTF-8"%>Insert title herea {cursor:hand; height:1; behavior: url(itshu.htc);  filter:progid:dximagetransform.microsoft.gradientwipe(duration=1);text-decoration : none ; } a
CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）
weixin_34413357的博客
04-19 158
字体渐变https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条https://blog.csdn.net/qq_2842405070/article/details/70238829 grid布局 http://www.ruanyifeng.com/blog/2019/0...
鼠标经过按钮，背景颜色出现渐变的效果
weixin_30691871的博客
12-30 673
<style type="text/css"> .btn{ padding:15px 40px; background: red; border-style: none; color:white; font-size: 16px; cursor: pointer; ...
背景图片hover加蒙层_css如何实现鼠标移至图片上显示遮罩层及文字
最新发布
05-27
可以使用CSS的伪类选择器`:hover`以及`::before`或`::after`伪元素来实现背景图片hover加蒙层的效果。 具体实现步骤如下： 1. 给需要添加背景图片的元素设置一个相对定位的父级元素，并设置背景图片。 2. 给该父级元素设置一个宽高和`overflow:hidden`，以隐藏超出父级元素的内容。 3. 使用`::before`或`::after`伪元素来创建一个遮罩层，并设置其宽高和背景颜色，透明度等属性。 4. 给遮罩层添加`transition`属性，以实现渐变过渡效果。 5. 使用`opacity`属性来控制遮罩层的透明度，当鼠标移至图片上时，通过`:hover`伪类选择器来控制遮罩层的透明度。 6. 在遮罩层中添加需要显示的文字或其他内容。 示例代码如下： HTML： ``` <div class="box"> <div class="bg"></div> <div class="mask"> <h2>这是遮罩层</h2> <p>这是遮罩层中的文字内容</p> </div> </div> ``` CSS： ``` .box { position: relative; width: 300px; height: 200px; overflow: hidden; } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(图片地址) no-repeat center center; background-size: cover; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; } .box:hover .mask { opacity: 1; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值