Challenge: Combine Translation and Skewing
Task
Create an interactive information card about animals. Follow these steps to add dynamic effects on hover:
- Apply a
perspectiveof400pxto the parent element, adivwith the class namecontainer. - Utilize the
translateZ()function to bring the card (divwith the class namecard) closer to the user by50px. - Introduce a skew along the x-axis by
10degto the card description (divwith the class namecard-description-wrapper).
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/transformations+section/hippo-challenge+image.png"
alt="hippo"
width="100px"
/>
<div class="card-description-wrapper">
<h3 class="card-title">Hippo</h3>
<p class="card-text">
Large semi-aquatic mammal with thick skin, massive jaws, and short
legs, found in sub-Saharan Africa.
</p>
</div>
</div>
</div>
</body>
</html>
:root {
--time: 4000ms;
--time-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.container {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
/* --------------- Make changes below this line --------------- */
___: ___;
/* --------------- Make changes above this line --------------- */
}
.card:hover {
/* --------------- Make changes below this line --------------- */
___: ___;
/* --------------- Make changes above this line --------------- */
}
.card:hover .card-description-wrapper {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #f6f1f1;
/* --------------- Make changes below this line --------------- */
___: ___;
/* --------------- Make changes above this line --------------- */
}
/* Not the current focus */
* {
box-sizing: border-box;
}
h3,
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 5. Capítulo 8
