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

更新日期: 2022-04-04 阅读次数: 5863 字数: 132 分类: CSS

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

当鼠标 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 聊聊, 查看更多联系方式

tags: CSS 特效