Html 带缩放变换的外部和内部div_Html_Css

Html 带缩放变换的外部和内部div

html css

Html 带缩放变换的外部和内部div,html,css,Html,Css,我有两个div，一个外部div设置背景图像，一个内部div显示一些“单击此处”文本。我想实现一个缩放悬停效果，每当鼠标悬停在外框中的任何元素上时都会起作用，但目前它只在鼠标位于内div和外div的边界之间时起作用。当鼠标位于内部div内时也会出现这种效果。下面是我的代码演示： HTML: 您正在使用位置：绝对，因此您可以颠倒您的.OuterBox和.InnerBox顺序，然后使用适当的z-index和后续选择器~：正文{ 字体系列：-苹果系统，BlinkMacSystemFont，'Sego

我有两个div，一个外部div设置背景图像，一个内部div显示一些“单击此处”文本。我想实现一个缩放悬停效果，每当鼠标悬停在外框中的任何元素上时都会起作用，但目前它只在鼠标位于内div和外div的边界之间时起作用。当鼠标位于内部div内时也会出现这种效果。下面是我的代码演示：

HTML:

您正在使用

位置：绝对

，因此您可以颠倒您的

.OuterBox

和

.InnerBox

顺序，然后使用适当的

z-index

和后续选择器

：

正文{
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
}
.限制器{
高度：150像素；
宽度：300px；
位置：相对位置；
溢出：隐藏；
}
.外接线盒{
身高：100%；
宽度：100%；
背景：url(https://www.dictionary.com/e/wp-content/uploads/2019/09/vscogirl1000x700.jpg)居中/盖不重复；
过渡：所有的1容易；
位置：绝对位置；
}
.OuterBox:悬停，
.InnerBox:hover~.OuterBox{/*此行*/
转换：比例（1.5）；
}
/*覆盖层*/
.OuterBox:：之后{
内容：“；
背景：黑色；
身高：100%；
宽度：100%；
位置：绝对位置；
不透明度：0.5；
}
.InnerBox{
身高：50%；
宽度：50%；
边框：白色实心5px；
最高：25%；
左：25%；
位置：绝对位置；
字体大小：10px；
颜色：白色；
文本对齐：居中；
z-index:1；/*和这一行*/
}


点击这里
Lorem，ipsum

您使用的是

位置：绝对

，因此您可以颠倒您的

.OuterBox

和

.InnerBox

顺序，然后使用适当的

z-index

和后续选择器

：

正文{
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
}
.限制器{
高度：150像素；
宽度：300px；
位置：相对位置；
溢出：隐藏；
}
.外接线盒{
身高：100%；
宽度：100%；
背景：url(https://www.dictionary.com/e/wp-content/uploads/2019/09/vscogirl1000x700.jpg)居中/盖不重复；
过渡：所有的1容易；
位置：绝对位置；
}
.OuterBox:悬停，
.InnerBox:hover~.OuterBox{/*此行*/
转换：比例（1.5）；
}
/*覆盖层*/
.OuterBox:：之后{
内容：“；
背景：黑色；
身高：100%；
宽度：100%；
位置：绝对位置；
不透明度：0.5；
}
.InnerBox{
身高：50%；
宽度：50%；
边框：白色实心5px；
最高：25%；
左：25%；
位置：绝对位置；
字体大小：10px；
颜色：白色；
文本对齐：居中；
z-index:1；/*和这一行*/
}


点击这里
Lorem，ipsum

您只需将内部div与外部div打包。您只需将内部div与外部div打包。非常感谢，伙计。我为这件事发疯了：非常感谢，伙计。我为这件事发疯了：D

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>

<body>
    <div class="limiter">
        <div class="OuterBox"></div>
        <div class="InnerBox">
            <div>
                <h2>CLICK HERE</h2>
                <p>Lorem, ipsum.</p>
            </div>
        </div>
    </div>
</body>

</html>

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.limiter { 
    height: 150px;
    width: 300px;
    position: relative;
    overflow: hidden;
}

.OuterBox {
    height: 100%;
    width: 100%;
    background: url(https://www.dictionary.com/e/wp-content/uploads/2019/09/vscogirl1000x700.jpg) center center/cover no-repeat;
    transition: all 1s ease;
    position: absolute;
}

.OuterBox:hover {
    transform: scale(1.5);
}


/* Overlay */
.OuterBox::after {
    content: "";
    background: black;
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.5;
}

.InnerBox {
    height: 50%;
    width: 50%;
    border: white solid 5px;
    top: 25%;
    left: 25%;
    position: absolute;
    font-size: 10px;
    color: white;
    text-align: center;
}