Skip to main content

Return to Answer

added 41 characters in body
Source Link
Sato Takeru
Sato Takeru
  • 1.7k
  • 4
  • 13
  • 28

I think it can help you.

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.animate {
    transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>

You can also use onmouseover instead of onmouseenter.

I think it can help you.

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.animate {
    transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>

I think it can help you.

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.animate {
    transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>

You can also use onmouseover instead of onmouseenter.

Source Link
Sato Takeru
Sato Takeru
  • 1.7k
  • 4
  • 13
  • 28

I think it can help you.

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.animate {
    transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>