Hover over one DIV to zoom another DIV
Question
I am not sure if this is a simple task to accomplish but I've had no success so far.
Let me explain the problem a little so that you understand what's going on.
The body element contains one div which contains a background that covers the entire window. I want this very big div to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible div the parent would zoom from there.
This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.
Here's some code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
</script>
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
transition: transform .2s;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
}
Thanks a lot in advance!
2 answers
solution1
0 2018-09-11 11:37:40
-> please update css into your css file
* { margin: 0; padding: 0; } body { line-height: 1.5; font-family: Arial, Tahoma; font-size: 12px; } .indexPage { background: url("map.jpg"); width: 100%; height: 100%; background-size: cover; position: fixed; } .indexPage > .indexInvisible { width: 80%; height: 80%; background: black; margin: 5% auto 0 auto; overflow: hidden; transition: transform .2s; -webkit-transition: transform .2s; -moz-transition: transform .2s; -ms-transition: transform .2s; } .indexPage:hover .indexInvisible { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="indexPage" class="indexPage"> <div id="indexInvisible" class="indexInvisible"></div> </div> </body> </html>
solution2
0 2018-09-11 12:00:33
Use a background-image:inherit on the inner div and leverage background-size on hover.
* { margin: 0; padding: 0; box-sizing: border-box; text-align: center; } .map { width: 860px; height: 480px; background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg); margin: 10px; border: 5px solid red; position: relative; display: inline-flex; justify-content: center; align-items: center; ; } .zoomer { width: 80%; height: 80%; background: inherit; border: 3px solid blue; background-size: 125% 125%; transition: background-size .5s ease; background-position: center center; } .zoomer:hover { background-size: 150% 150%; }
<div class="map"> <div class="zoomer"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.