Как я могу добиться анимированного масштабирования при наведении курсора мыши с помощью CSS? ⇐ CSS

[Anonymous]

I'm currently working on a project and could use some assistance. I'm aiming to integrate a particular animation effect where, upon hovering over any of the four image selections in the project, I want them to dynamically zoom in and change angles, enhancing the visual experience. I'm hoping to achieve an effect similar to the example I provided. I've checked YouTube and Google, but can't find a guide or video on how to do it, Any guidance on implementing this would be greatly appreciated!

Example: zoomed in image when hover

here is my code:

Hello, World! body { background-color: #eb3477; } .sel-btns { display: flex; justify-content: space-evenly; align-items: flex-end; } .box { margin-top: 100px; } .box { display: flex; border: solid; color: white; height: 50px; width: 65px; align-items: flex-end; border-radius: .5em; background: #d94c74; } img { position: relative; right: 45px; top: 5px; height: 150px; width: 150px; }







you can also run the code here!: https://jsfiddle.net/sofie_anne13/qt3Lvxn8/105/


Источник: https://stackoverflow.com/questions/780 ... -using-css