1.9 KiB
1.9 KiB
id | title | challengeType | videoUrl | forumTopicId |
---|---|---|---|---|
587d78a5367417b2b2512ada | Use the CSS Transform scale Property to Scale an Element on Hover | 0 | https://scrimba.com/c/cyLPJuM | 301077 |
Description
transform
property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover
that specify a certain state of an element, the transform
property can easily add interactivity to your elements.
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
p:hover {
transform: scale(2.1);
}
Note: Applying a transform to a div
element will also affect any child elements contained in the div.
Instructions
hover
state of the div
and use the transform
property to scale the div
element to 1.1 times its original size when a user hovers over it.
Tests
tests:
- text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
Challenge Seed
<style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
background: linear-gradient(
53deg,
#ccfffc,
#ffcccf
);
}
</style>
<div></div>
Solution
<style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
background: linear-gradient(
53deg,
#ccfffc,
#ffcccf
);
}
div:hover {
transform: scale(1.1);
}
</style>
<div></div>