Yash Mistry Yash Mistry - 6 months ago 25
CSS Question

need to make a div scale and scrollable on hover using css without javascript

We are building a product builder using an app that only allows us to change the css and nothing else. Need the preview image inside the div to magnify on hover and be scrollable from corner to corner in order to show the customers all the details on the product. I have already added css to make it scale up on hover but cant get it to scroll. Any help would be greatly appreciated.

.shappify_product_builder .option_image .spritespin-stage {
width: 500px !important;
height: 500px !important;
background-size: 100% !important;
margin-left: 40px;
.spritespin-stage { transition: all .2s ease-in-out; }
.spritespin-stage:hover { transform: scale(2); overflow: auto; }

and below is the html. I need the image in the div with .spritespin stage to magnify and be scrollable.

<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
<div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url(&quot;//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png&quot;); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
<div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>


check if below example helps to solve the problem.


.spritespin-stage {
width: 100px !important;
height: 100px !important;
background-size: 100% !important;
transition: all .2s ease-in-out; 
transform: scale(1);
.option_image{overflow:hidden; width:100px;height:100px}
.option_image:hover .spritespin-stage{margin:50px 0 0 50px;transform: scale(2);}

css css3
<div class="shappify_product_builder">
  <div class="option_image">
  <p class="spritespin-stage">Test content</p>