Hovering Effect - I

Lesson 30 of 31 in Coddy's 3D Card | Front-end Project course.

This code is for a hover effect on elements with the class "card" that are inside an element with the class "parent". When you hover over the parent element, the card will rotate slightly, and there will be some shadow effects and translations applied to different parts of the card:

The card itself will rotate slightly, by 30 degrees, around an axis defined by (1, 1, 0).
The card will get a box-shadow effect to give it a lifted appearance.
The social buttons inside the card's bottom section will move upwards by 50 pixels and get a shadow effect.
The logo's second circle will move upwards by 60 pixels.
The logo's third circle will move upwards by 80 pixels.
The logo's fourth circle will move upwards by 100 pixels.

Challenge

Easy

Use this code: (Important)

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

Now you can hover on the card.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Hovering Effect - I

All lessons in 3D Card | Front-end Project