我正在尝试制作一组悬停时缩放的图片(带边框半径(。但要呆在一个盒子里，让它看起来只是在盒子里放大，而不是在现场变得更大。我已经试过几件事了，都没用。我真的很感谢你的建议。
https://i.stack.imgur.com/xnOIN.jpg
.foto{
overflow: hidden;
max-width: 100%;
border-radius: 25px;
}
.popis{
position: absolute;
bottom: 5px;
left: 50px;
}
.popis h3{
font-weight: 600;
color: white;
}
main img{
filter: brightness(60%);
width: 100%;
overflow: hidden;
border-radius: 25px;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
transition: transform 0.5s, opacity 0.5s;
}
main img:hover{
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: transform 0.5s, opacity 0.5s;
}<main role="main" class="container">
<div class="row" id="nprace">
<div class="col-lg-12 col-md-12 text-center nadpis">
<h2>Lorem ipsum</h2>
</div>
<div class="row">
<div class="foto col-lg-4 col-md-4">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto col-lg-4 col-md-4">
<img src="img/hagendaz.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto col-lg-4 col-md-4">
<img src="img/hagendaz.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto col-lg-4 col-md-4">
<img src="img/hagendaz.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto col-lg-8 col-md-8">
<h3>Text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porttitor turpis ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nibh. Aenean vel massa quis mauris vehicula lacinia. Nulla quis diam. Etiam quis </p>
</div>
<div class="foto col-lg-4 col-md-4">
<img src="img/hagendaz.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto col-lg-4 col-md-4">
<img src="img/hagendaz.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto col-lg-4 col-md-4">
<img src="img/hagendaz.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
</div>
</div>
</main>好吧，我想这应该能解决的问题
只要用户悬停在图像的边缘，就可以消除图像边缘的差异。这应该会使图像在缩放时看起来居中。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
img{
height: 300px;
width:300px;
transition: 0.5s; /*Add transition to make it smooth */
cursor: pointer;
border-radius: 25px;
}
img:hover{
margin-left: -20px; /*Take away the difference you want to zoom in (20px in this case)*/
margin-right: -20px; /*Take away the difference you want to zoom in (20px in this case)*/
margin-top: -20px; /*Take away the difference you want to zoom in (20px in this case)*/
margin-bottom: -20px; /*Take away the difference you want to zoom in (20px in this case)*/
height: 320px; /*Change image size on hover*/
width:320px; /*Change image size on hover*/
}
#imgWrapper{
height: 300px;
width:300px;
margin-left: auto;
margin-right: auto;
overflow: hidden; /*Set the wrappers overflow to hidden*/
text-align: center;
border-radius: 25px;
}
</style>
</head>
<body>
<div id="imgWrapper">
<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">
</div>
</body>
</html>您很接近，请查看评论。
.foto{
overflow: hidden;
max-width: 60%; /* Changed for visibility */
border-radius: 25px;
width: 20rem;
padding: 1rem
}
.popis{
position: absolute;
bottom: 5px;
left: 50px;
}
.popis h3{
font-weight: 600;
color: white;
}
main img{
filter: brightness(60%);
width: 100%;
overflow: hidden;
border-radius: 25px;
transform: scale(1.1); /* Reset */
transition: transform 0.5s, opacity 0.5s;
}
main img:hover{
opacity: 1;
transform: scale(1.2, 1.2); /* Transform X * 1.4 and Y * 1.4 */
transform-origin: center center; /* Transform from X-center and Y-center */
transition: transform 0.5s, opacity 0.5s;
}<main role="main" class="container">
<div class="row" id="nprace">
<div class="col-lg-12 col-md-12 text-center nadpis">
<h2>Lorem ipsum</h2>
</div>
<div class="row">
<div class="foto">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
</div>
<div class="foto">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
</div>
<div class="foto">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
<div class="popis">
<h3>Hagendaz</h3>
</div>
</div>
<div class="foto">
<h3>Text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porttitor turpis ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nibh. Aenean vel massa quis mauris vehicula lacinia. Nulla quis diam. Etiam quis </p>
</div>
</div>
</div>
</main>