在商品图片列表页,想增加一个交互效果。
当鼠标 Hover DIV 区域,背景图片拉近放大显示。
HTML
<div class="portfolio-item-block" style="">
<div class="portfolio-item-block-inside">
<a href="/" target="_self" rel="" title="Pressure Equipment">
<div class="portfolio-item-image" style="background-image: url(/public/img/demo.jpg);"></div>
<div class="portfolio-item-bg"></div>
<div class="info">
<h4 class="title">打印机</h4>
<div class="view-more btn mgt-button">了解更多</div>
</div>
</a>
</div>
</div>
CSS
.portfolio-item-block:hover .portfolio-item-image, .portfolio-item-block:focus .portfolio-item-image {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
同时文字增加移动特效
.portfolio-item-block:hover .info, .portfolio-item-block:focus .info {
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px);
transition-duration: 0.5s;
}
效果演示
https://www.ytjpkj.com/spare-parts
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式