时间戳

首页 > 解决方案 > 包含 div 容器中的图像和转换属性不起作用

css - 包含 div 容器中的图像和转换属性不起作用

问题描述

我正在使用 Elementor Pro 并希望某些图像在 div 容器内缩放并在悬停时对它们发光，因此在寻求帮助时有人为我编写了此代码，但它没有缩放图像。我添加了 transform 属性来缩放它，但我不知道如何将它保存在容器中。我还希望过渡平滑，所以我还添加了似乎根本不起作用的过渡属性。这是我第一次在这里提问，我没有编码背景，所以如果我说错了，我深表歉意。

.shine-test::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.5);
 content: '';
 transition: all 0.6s;
 transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
}
.shine-test:hover::before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);
}
.shine-test:hover {
transition-timing-function: ease-in-out;
transition-duration: .6s;
}
.shine-test:hover {
transform: scale(1.2)
}

标签： csswordpresselementor

解决方案

如果要更改包装器的大小，则需要 JavaScript，因为按比例更改的内容会保留其原始“盒子”。

尽管如果您知道要缩放到的大小，则可以执行以下操作：

盒子 = 40*40

比例 1.5 = 框宽 60*60

.box {
    width: 40px;
    height: 40px;
}

.box.scaled {
    width: 60px;
    height: 60px;
}

.box.scaled > .shine-test {
    transform: scale(1.5);
}

推荐阅读