У меня есть два div, внешний, который устанавливает фоновое изображение, и внутренний div, который отображает некоторый текст «Click here». Я хочу реализовать эффект увеличения при наведении, который работает всякий раз, когда мышь наводит курсор на любой элемент во внешнем блоке, но на данный момент он работает только тогда, когда мышь находится между границами внутреннего и внешнего элементов div. Эффект должен произойти также, когда мышь находится внутри внутреннего div. Вот демонстрация моего кода: https://codepen.io/joaoricardotg/pen/jOPvomp
HTML:
<!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>
CSS:
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;
}