How to create a Profile Card Hover Effect in CSS

Learn with us how to create a Profile Card Hover Effect in CSS!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim Check the link in bio to access the full code 🤩 any question about the design? #webdevelopment #programmingexercises #csscoding #coding #webdev ♬ original sound - Creative Tim

1. HTML Code

<div class="container">
  <div class="card card0">
    <div class="border">
      <h2>Tiger</h2>
      <div class="icons">
        <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>Lizard</h2>
      <div class="icons">
        <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>Owl</h2>
      <div class="icons">
        <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>

2. CSS Code

body
  background-color: #272640

.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.im.ge/2022/10/14/27ORkc.close-up-face-tiger-isolated-black-background.jpg') center center no-repeat
  background-size: 500px

  &:hover
    background: url('https://i.im.ge/2022/10/14/27ORkc.close-up-face-tiger-isolated-black-background.jpg') center center no-repeat
    background-size: 700px

    h2
      opacity: 1

    .fa
      opacity: 1

.card1
  background: url('https://i.im.ge/2022/10/17/2Utbpa.lizard-forest-dragon-female-branch-with-black-background-1.jpg') center center no-repeat
  background-size: 600px

  &:hover
    background: url('https://i.im.ge/2022/10/17/2Utbpa.lizard-forest-dragon-female-branch-with-black-background-1.jpg') center center no-repeat
    background-size: 800px

    h2
      opacity: 1

    .fa
      opacity: 1

.card2
  background: url('https://i.im.ge/2022/10/14/271hHT.portrait-eurasian-eagle-owl-looking-front-1.jpg') center center no-repeat
  background-size: 800px

  &:hover
    background: url('https://i.im.ge/2022/10/14/271hHT.portrait-eurasian-eagle-owl-looking-front-1.jpg') center center no-repeat
    background-size: 1000px

    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

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources: