Hi there, I revisited the ‘Create a More Complex Shape Using CSS and HTML’ challenge and decided to experiment with the ‘hover:’ state of the .heart element to increase its’ size when the cursor hovers over it. However, it does not behave as expected: it increases in size, but also rotates clockwise by 45deg! Can anyone tell me why this is happening please? My code is below:
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart:hover {
transform: scale(1.5);
background-color: red !important;
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
I think it is because in the .heart
class you are already rotating it 45 degrees anti-clockwise, and when you hover it is no longer applying the rotate, making it rotate 45 degrees clockwise back to it’s original position.
Try adding the rotate(-45deg)
to your hover psuedo class
Thanks for the idea, however when I put rotate(-45deg) into .heart::after and .heart::before it still rotates. If I put that into .heart:hover it no longer rotates or scales!! Ugh!!
.heart::before
and .heart::after
are elements you are creating in CSS that are connected to .heart
, but they are still different elements. If you apply rotate
to them it will just rotate them. So what @camelcamper said is the reason it’s rotating, you’re removing the 45deg rotation on hover
Dont worry about the :before
& :after
In your .heart
class you are rotating -45deg
However when you hover and the :hover
css gets applied, it no longer gets the rotate -45deg
from the .heart
class, so you need to apply the rotation in your :hover
class also.
I feel like I explained it better in my previous comment however you can also have a look at this codepen and compare it with yours
Thanks again for putting the time in to look at this and to reply @camelcamper that does indeed cure the problem of rotation on hover, however, the transform: scale(1.5); doesn’t work when you add the transform: rotate(-45deg).
But hooray! I just thought; try putting the rotate(-45deg) into the existing transform like thus:
transform: scale(1.5) rotate(-45deg);
That did the trick and my heart now pumps up by 1.5 when I hover!!!1 Yeah!
Thanks again, it was driving me nuts!
2 Likes
Nice work, you got it working.
To go one step further you can add a duration to your transform so it moves smoothly.
Try transition-duration: 5s;
inside your .heart
class.
That is a pretty slow duration, over 5 seconds so you might want to change it.
https://www.w3schools.com/cssref/css3_pr_transition-duration.asp
https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
Yeah! that’s pretty cool, duration of 1s works about best. I get a funny little twitch to the left though when the side scroll-bar appears in the right hand side of the window. I’ll have to figure that one out next! I’m guessing it’s something to do with the container expanding as the heart grows, perhaps I need to specify a fixed size container? Only does it on Chrome browser though, Firefox is fine with it!
Here’s the link to my pen if you want to take a look. https://codepen.io/Fishbite/pen/ReMvKK
Thanks for the links you sent. very useful
Speak soon