Tell us what’s happening:
I want to know if how to increase it’s size while I hover over it.
Your code so far
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: red;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content:"" ;
background-color: red;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html
estuve viendo como ayudarte hasta aca llegue a darte una mano implementando variable de widt y heith deberias hacer lo mismo con el resto de lo que influye en el corazon
.heart{
--latency:50px;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
height: var(--latency);
width: var(--latency);
transform: rotate(-45deg);
}
div:hover{
--latency:80px;
}
.heart::after {
background-color: red;
content: "";
border-radius: 50%;
position: absolute;
height: var(--latency);
width: var(--latency);
top: 0px;
left: 25px;
}
.heart::before {
content:"" ;
background-color: red;
border-radius: 50%;
position: absolute;
height: var(--latency);
width: var(--latency);
top: -25px;
left: 0px;
}
´´´
.heart{
--latency:50px;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
height: var(--latency);
width: var(--latency);
transform: rotate(-45deg);
}
div:hover{
--latency:80px;
}
.heart::after {
background-color: red;
content: "";
border-radius: 50%;
position: absolute;
height: var(--latency);
width: var(--latency);
top: 0px;
left: 25px;
}
.heart::before {
content:"" ;
background-color: red;
border-radius: 50%;
position: absolute;
height: var(--latency);
width: var(--latency);
top: -25px;
left: 0px;
}
´´´
To change its size on hover, you would make use of the hover pseudo class on your heart class. And the thing that you want to change when hovered is this:
transform: scale()
While hovering, to make the heart bigger in the straight shape :
.heart:hover{
transform: scale(2) rotate(-45deg);
}
is it a some kind of good practise?