I have the below structure and I want to animate that once I hover over h1, I have below css which doesn’t work not sure where I am doing things wrong.
How can I animate with CSS only as I don’t want to use JS? The animation could be scaled or skewed.
.wrapper{
width:200px;
margin:100px auto;
}
.wrapper h1::before {
content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png');
display: inline-block;
margin-left: -25px;
margin-top: -35px;
width:30px;
position: absolute;
/*filter: brightness(0) invert(1);*/
transition: all 0.3s ease-in-out;
}
.wrapper h1::before:hover {
cursor:progress;
transform: scale(1.2);
}<div class="wrapper">
<h1>About Us</h1>
</div>>Solution :
You :hover part is wrong here, use it like this:
.wrapper{
width:200px;
margin:100px auto;
}
.wrapper h1::before {
content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png');
display: inline-block;
margin-left: -25px;
margin-top: -35px;
width:30px;
position: absolute;
/*filter: brightness(0) invert(1);*/
transition: all 0.3s ease-in-out;
}
.wrapper h1:hover::before {
cursor: progress;
transform: scale(1.2);
}<div class="wrapper">
<h1>About Us</h1>
</div>