要显示预期效果,请在“餐饮服务”部分的site底部附近,将鼠标悬停在三张图片上。
我希望我的图像在悬停时放大 - 增加高度和宽度 - 同时它周围的框架缩小,溢出:隐藏的路径。
这是我到目前为止所写的内容:
<style type="text/css">
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 120%;
}
</style>
<div class="container">
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
</div>
<!---End of container-->
框架的高度正在缩小,但不是宽度。此外,我希望图像在所有四个边上展开,并且框架也要缩小。这可以用过渡以外的东西来实现吗?关于如何解决这个问题的任何建议或提示?
答案 0 :(得分:2)
只需为img&#39; transform:scale()
制作动画即可。
希望它有所帮助!
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover img {
transform: scale(2);
}
&#13;
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
&#13;