我正在做一个项目，需要一些帮助.我的目标是集成一个特定的动画效果，当鼠标悬停在项目中的四个图像 Select 中的任何一个上时，我希望它们能够动态地放大和改变Angular ，增强视觉体验.我希望达到类似于我提供的例子的效果.我已经判断了YouTube和谷歌，但找不到一个指南或视频如何做到这一点，任何指导实施这将不胜感激！
示例: zoomed in image when hover个
以下是我的代码:
<html>
<head>
<title>Hello, World!</title>
</head>
<style>
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;
}
</style>
<body>
<div class='wrapper'>
<div class="sel-btns">
<div class="box">
<a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
</div>
<div class="box">
<a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
</div>
<div class="box">
<a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
</div>
<div class="box">
<a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
</div>
</div>
</div>
</body>
</html>
您也可以在此处运行代码！: https://jsfiddle.net/sofie_anne13/qt3Lvxn8/105/个