HTML,CSS实现鼠标划过头像,头像突出变大(附源码)

news2024/11/14 15:04:11

话不多说,先上代码

先看原图:

![在这里插入图片描述](https://img-blog.csdnimg.cn/e034a4b3905140298f8b729dd1e9ed54.png

再看 鼠标放上去后的图:

在这里插入图片描述

是不是明显感觉到 人物头像突出了一些,而且还增加了阴影部分的效果呢?

直接上代码!!!

<!--由于我的 img 标签放的是循环后的图片,你可以按照你的数据自行修改  -->
<div class="swiper-slide newly-slide newly-hover speakerList--q4JTz">
	<a class="baseLink--8q29k" target="_blank" href="要跳转的路径">
		<div class="speaker--r2ijq">
      		<div class="speakerPicBox--QeEr9">
           		<div>
           			<img src="图片路径" class="teacher-img" />
        		</div>
           </div> 
       </div>
	</a>
</div>

<!--CSS  可能会有多出来的css,可以忽略掉,多出来的css 是图片右侧的文字的样式...-->
<style>
.speaker--r2ijq{
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
   padding: 8px 12px;
   width: 397px;
}
.speakerProfile--oCOCh{
 flex: 1 1;
 margin-left: 12px;
 overflow: hidden;
}
.speakerName--bKQtn{
 font-size: 22px;
 font-weight: 600;
 line-height: 22px;
 margin-bottom: 8px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 word-break: break-all;
 text-align: left;
 cursor: pointer;
 color: #535353;
 line-height: 33px;
 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
 font-weight: bold;
}
.speakerDesc--vo1ea{
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 color: #606060;
 display: -webkit-box;
 font-weight: 400;
 line-height: 22px;
 overflow: hidden;
 word-break: break-all;
 text-align: left;
 margin-top: 20px;
 width: 225px;
 height: 44px;
 max-width:225px;
 font-size: 12px;
 font-family: PingFangSC-Regular, PingFang SC;
 cursor: pointer;
}

.speakerList--q4JTz .speaker--r2ijq:hover .speakerPicBox--QeEr9:before{
   background-color: rgba(50,51,53,.1);
   bottom: 0;
   content: "";
   left: 0;
   margin: auto;
   position: absolute;
   right: 228px;
   top: 0;
   z-index: 1;
   width: 144px;
   height: 148px;
   border-radius: 12px;
}
.speakerList--q4JTz .speakerPicBox--QeEr9{
   border-radius: 12px;
   flex-basis: 144px;
   height: 148px;
   overflow: hidden;
}
.speaker--r2ijq:hover .teacher-img {
 transform: scale(1.1);
}
.speaker--r2ijq:hover .speakerName--bKQtn{
 color: #EA7336;
}
.teacher-more{
 display: inline-block;
 padding-top: 60px;
 float: right;
}
.teacher-more>a{
 color: #A3A3A3 !important;
}
.teacher-more>a:hover{
 color: #ff7020!important;
}
</style>

大功告成,如上代码,就是鼠标滑过后,头像或图片突出的代码,快去试试吧!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1135379.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文总结 MetaQ/RocketMQ 原理

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

c语言基础:L1-058 6翻了

“666”是一种网络用语&#xff0c;大概是表示某人很厉害、我们很佩服的意思。最近又衍生出另一个数字“9”&#xff0c;意思是“6翻了”&#xff0c;实在太厉害的意思。如果你以为这就是厉害的最高境界&#xff0c;那就错啦 —— 目前的最高境界是数字“27”&#xff0c;因为这…

VDA到Excel方案介绍之自定义邮件接收主题

VDA标准是德国汽车工业协会&#xff08;Verband der Automobilindustrie&#xff0c;简称VDA&#xff09;制定的一系列汽车行业标准。这些标准包括了汽车生产、质量管理、供应链管理、环境保护、安全性能等方面的规范和指南。VDA标准通常被德国和国际上的汽车制造商采用&#x…

会声会影Corel VideoStudio2024旗舰版新功能介绍及会声会影2024这款软件怎么样?

会声会影Corel VideoStudio2024旗舰版一款功能丰富的视频编辑软件。会声会影2023简单易用&#xff0c;具有史无前例的强大功能&#xff0c;拖放式标题、转场、覆叠和滤镜&#xff0c;色彩分级、动态分屏视频和新增强的遮罩创建器&#xff0c;超越基本编辑&#xff0c;实现影院级…

使用Scala和Sttp库编写爬虫程序

以下是一个使用Scala和Sttp库编写的视频爬虫程序&#xff0c;该程序使用了proxy来获取IP。请注意&#xff0c;这个示例需要在上找到一个具体的视频链接&#xff0c;然后将其传递给crawlVideo函数。 import scala.util.{Failure, Success} import scala.concurrent.{Future, Ex…

Linux驱动调试方法(高级字符设备八)

在编写Linux驱动程序时&#xff0c;通常都使用 printk 函数打印相应的提示信息从而对驱动进行调试&#xff0c;除了printk 函数之外&#xff0c;还有其他的方式来调试驱动呢。 一、dump_stack 函数 作用:打印内核调用堆栈&#xff0c;并打印函数的调用关系。 这里以最简单的 h…

传奇黑客斯诺登,现状如何了?

曾经曝光米国棱镜计划的英雄斯诺登&#xff0c;现在怎么样了&#xff1f; 要说老米最恨的人有哪些&#xff0c;那斯诺登肯定榜上有名。斯诺登曾经是一名军人&#xff0c;退伍后在中情局负责维持网络安全&#xff0c;在得知老米的棱镜计划之后&#xff0c;出于人道主义&#xff…

面试题之JavaScript经典for循环(var let)

如果你也在面试找工作&#xff0c;那么也一定遇到过这道for循环打印结果的题&#xff0c;下面我们来探讨下 var循环 for(var i 0; i < 10; i) {setTimeout(function(){console.log(i)}); } 先把答案写出来 下面来讲一下原因&#xff1a; 划重点 ① var ②setTimeout() …

发卡系统微信小程序源码/云盘发卡系统源码带PC端/自动发卡小程序源码(开源)

源码介绍&#xff1a; 最新开源的发卡系统微信小程序源码&#xff0c;这是一款云盘发卡系统源码&#xff0c;还带了电脑PC端。它是一款实用方便操作自动发卡小程序源码&#xff0c;它使用ERMEB云盘发卡&#xff0c;能为用户提供便捷的发卡服务。 源码框架&#xff1a; 系统采…

Unity的碰撞检测(四)

温馨提示&#xff1a;本文基于前一篇“Unity的碰撞检测(三)”继续探讨两个游戏对象具备刚体的触发检测&#xff0c;阅读本文则默认已阅读前文。 &#xff08;一&#xff09;测试说明 在基于两个游戏对象都具备触发器和刚体且属性一致的条件下&#xff0c;若二者刚体的BodyType…

CTF-php特性绕过

注意&#xff1a;null0 正确 nullflase 错误 Extract变量覆盖 <?php$flagxxx; extract($_GET);if(isset($shiyan)){ $contenttrim(file_get_contents($flag));//trim移除引号if($shiyan$content){ echoctf{xxx}; }else{ echoOh.no;} }?> extract() 函数从数组中将…

java中Map常见的面试问题,扩容问题,转红黑树的前提,解决Hash哈希冲突的方法

Map集合常见面试题 如何解决 解决哈希碰撞的方法 1链地址法(hashMap的处理方式) 把hash表的每个单元作为链表的头节点。当发生冲突时放入到同一个hash值计算索引对应的链表。 2开放定址法 发生冲突后寻找下一个地址 3再次hash法 对hash值再次进行hash计算 4建立公共溢出区…

【Linux】进程地址空间、进程的概念、进程的描述、物理地址空间、进程地址空间和物理地址空间的关系

文章目录 1.进程的概念1.1进程是什么 2.进程的描述2.1进程的组成2.2task_struct的内容 3.进程地址空间&#xff08;虚拟地址空间&#xff09;3.1物理地址空间3.2进程地址空间和物理地址空间的关系 1.进程的概念 1.1进程是什么 从计算机的硬件到软件和用户需要有很多的交互&…

win11安装docekr、docker-compose

1.docker安装 下载地址&#xff1a;Install Docker Desktop on Windows | Docker Docs 出问题别慌&#xff0c;看清楚提示信息&#xff0c;cmd更新wsl&#xff0c;什么是wsl&#xff0c;百度好好理解一下哦 2.docker-compose安装 还是去官方看看怎么说的&#xff0c;然后跟着处…

面向边缘场景的 PWA 实践

背景 随着5G技术的发展&#xff0c;物联网边缘侧主要应用于数据传输量大、安全要求高以及数据实时处理等行业与应用场景中。其中&#xff0c;边缘计算是一种分布式计算模式&#xff0c;其将计算资源和数据处理能力推向接近数据源的边缘设备&#xff0c;以减少延迟并提高响应速度…

设计模式:中介者模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

上一篇《迭代器模式》 下一篇《备忘录模式》 简介&#xff1a; 中介者模式&#xff0c;它是是一种行为设计模式&#xff0c;它允许将一组对象之间的交互封装到一个单独的类中&#xff0c;从而降低对象之间的耦合性…

KF-GINS 和 OB-GINS 的 Earth类 和 Rotation 类

原始 Markdown文档、Visio流程图、XMind思维导图见&#xff1a;https://github.com/LiZhengXiao99/Navigation-Learning 文章目录 一、Earth 类&#xff1a;地球参数和坐标转换1、gravity()&#xff1a;正常重力计算2、meridianPrimeVerticalRadius()&#xff1a;计算子午圈半径…

04 文件管理

文件管理 文件和目录的创建 删除文件和目录 文件查找命令 文件的拷贝和移动 打包和压缩

MySQL -- 表的约束

MySQL – 表的约束 文章目录 MySQL -- 表的约束一、表的约束1.空属性2.默认值3.列描述4.zerofill5.主键6.自增长7.唯一键8.外键 一、表的约束 真正约束字段的是数据类型&#xff0c;但是数据类型约束很单一&#xff0c;需要有一些额外的约束&#xff0c;更好的保证数据的合 法…

使用Selenium和Java编写爬虫程序

以下是一个使用Selenium和Java编写的音频爬虫程序&#xff0c;该程序使用了proxy的代码。请注意&#xff0c;这个示例需要在IDE中运行&#xff0c;并且可能需要根据您的系统和需求进行调整。 import java.io.IOException; import java.util.List; import java.util.concurrent…