img {
border-radius: 50%;
}
img:hover {
border-radius: 20%;
}
Это мой текущий код, и текущая проблема заключается в том, что он выглядит негладким, когда радиус границы подскакивает до 20% с 50% при наведении. Я хочу, чтобы он был более плавным, например, от 50% до 49%, от 48% до 47% и до 20%.
Найдите свойство transition . У вас даже было ключевое слово в заголовке вашего вопроса! ;)
img {
border-radius: 50%;
transition: border-radius 1s; /* HERE! */
}
img:hover {
border-radius: 20%;
}
<img src = "https://via.placeholder.com/100">