css /smarty 在悬停时更改容器的大小
css /smarty changing the size of a container on hover
如何在鼠标悬停时更改容器的大小,使其看起来像图片中那样。只有 css/Smarty 有可能吗?
这里是 Link 图片:http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg
您可以使用 transform: scale()
创建缩放其他元素的缩放效果。这是一个例子。
img {
max-width: 200px;
transition: transform .5s;
transform-origin: 50% 0;
background: #fff;
}
footer {
background: #111;
color: #fff;
padding: 2em 0;
}
.shirts {
text-align: center;
}
a:hover img {
transform: scale(1.2);
}
<div class="shirts">
<a href="#"><img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg"></a>
<a href="#"><img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg"></a>
</div>
<footer>footer</footer>
如何在鼠标悬停时更改容器的大小,使其看起来像图片中那样。只有 css/Smarty 有可能吗?
这里是 Link 图片:http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg
您可以使用 transform: scale()
创建缩放其他元素的缩放效果。这是一个例子。
img {
max-width: 200px;
transition: transform .5s;
transform-origin: 50% 0;
background: #fff;
}
footer {
background: #111;
color: #fff;
padding: 2em 0;
}
.shirts {
text-align: center;
}
a:hover img {
transform: scale(1.2);
}
<div class="shirts">
<a href="#"><img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg"></a>
<a href="#"><img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg"></a>
</div>
<footer>footer</footer>