yycvip 发表于 2024-11-23 19:19:42

HTML+CSS实现“个人资料卡悬停效果”



这是一个更加简洁的效果,当你将鼠标悬停在个人资料卡上时,卡片中的照片会放大,同时显示出人物的姓名和社交媒体链接。这种设计简约而不失美感,不会让用户感到信息过载。HTML
<div class="container">
<div class="card card0">
    <div class="border">
      <h2>Al Pacino</h2>
      <div class="icons">
      <i class="fa fa-codepen" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-dribbble" aria-hidden="true"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-facebook" aria-hidden="true"></i>
      </div>
    </div>
</div>
<div class="card card1">
    <div class="border">
      <h2>Ben Stiller</h2>
      <div class="icons">
      <i class="fa fa-codepen" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-dribbble" aria-hidden="true"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-facebook" aria-hidden="true"></i>
      </div>
    </div>
</div>
<div class="card card2">
    <div class="border">
      <h2>Patrick Stewart</h2>
      <div class="icons">
      <i class="fa fa-codepen" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-dribbble" aria-hidden="true"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-facebook" aria-hidden="true"></i>
      </div>
    </div>
</div>
</div>CSS
.container
height: 100vh
width: 100vw
max-height: 800px
max-width: 1280px
min-height: 600px
min-width: 1000px
display: flex
justify-content: space-around
align-items: center
margin: 0 auto

.border
height: 369px
width: 290px
background: transparent
border-radius: 10px
transition: border 1s
position: relative

&:hover
    border: 1px solid white

.card
height: 379px
width: 300px
background: grey
border-radius: 10px
transition: background 0.8s
overflow: hidden
background: black
box-shadow: 0 70px 63px -60px #000000
display: flex
justify-content: center
align-items: center
position: relative

.card0
background: url('https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg') center center no-repeat
background-size: 300px

&:hover
    background: url('https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg') left center no-repeat
    background-size: 600px

    h2
      opacity: 1

    .fa
      opacity: 1

.card1
background: url('https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg') center center no-repeat
background-size: 300px

&:hover
    background: url('https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg') left center no-repeat
    background-size: 600px

    h2
      opacity: 1

    .fa
      opacity: 1

.card2
background: url('https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg') center center no-repeat
background-size: 300px

&:hover
    background: url('https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg') left center no-repeat
    background-size: 600px

    h2
      opacity: 1

    .fa
      opacity: 1

h2
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
color: white
margin: 20px
opacity: 0
transition: opacity 1s

.fa
opacity: 0
transition: opacity 1s

.icons
position: absolute
fill: #fff
color: #fff
height: 130px
top: 226px
width: 50px
display: flex
flex-direction: column
align-items: center
justify-content: space-around

页: [1]
查看完整版本: HTML+CSS实现“个人资料卡悬停效果”