Hover DIV 区域，背景图片拉近放大显示效果

在商品图片列表页，想增加一个交互效果。

当鼠标 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式