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: