HTML,CSS实现鼠标划过头像,头像突出变大(附源码)-CSDN博客
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
话不多说先上代码
先看原图
再看 鼠标放上去后的图
是不是明显感觉到 人物头像突出了一些而且还增加了阴影部分的效果呢
直接上代码
<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>
<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>
大功告成如上代码就是鼠标滑过后头像或图片突出的代码快去试试吧
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |