如何实现缩放效果?
How to achive that zooming effect?
请问如何实现像这里这样的悬停效果?我的意思是当您将鼠标悬停在图像上时。
Link to a page with desired effect
您可以使用以下 属性 :
.item:hover img {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
这将使鼠标悬停在图像上时产生放大效果。
您可以改变参数以获得所需的效果。
你可以看看这个,和你想要的差不多:
div {
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
p {
background-color: black;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
color: white;
line-height: 100px;
}
img:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
img {
height:100px;
width: 100px;
transition: all .2s ease-in-out;
opacity: 0.5;
}
<div>
<p>Text</p>
<img src="https://placeimg.com/640/480/any">
</div>
请问如何实现像这里这样的悬停效果?我的意思是当您将鼠标悬停在图像上时。 Link to a page with desired effect
您可以使用以下 属性 :
.item:hover img {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
这将使鼠标悬停在图像上时产生放大效果。 您可以改变参数以获得所需的效果。
你可以看看这个,和你想要的差不多:
div {
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
p {
background-color: black;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
color: white;
line-height: 100px;
}
img:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
img {
height:100px;
width: 100px;
transition: all .2s ease-in-out;
opacity: 0.5;
}
<div>
<p>Text</p>
<img src="https://placeimg.com/640/480/any">
</div>