css - 需要在不使用 javascript 的情况下使用 css 在悬停时制作一个 div 缩放和滚动

Question

我们正在使用一个应用程序构建产品构建器，该应用程序只允许我们更改 css，而不能更改其他任何内容。需要 div 内的预览图像在悬停时放大，并且可以从一个 Angular 滚动到另一个 Angular ，以便向客户展示产品的所有细节。我已经添加了 css 以使其在悬停时放大但无法滚动。任何帮助将不胜感激。

.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; }

下面是html。我需要带有 .spritespin 舞台的 div 中的图像来放大和滚动。

<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>
</div>

Answer 1

检查以下示例是否有助于解决问题。

https://jsfiddle.net/6wy87p8e/2/

.spritespin-stage {
width: 100px !important;
height: 100px !important;
background-size: 100% !important;
background-color:red;
transition: all .2s ease-in-out; 
transform: scale(1);
margin:0;
}
.option_image{overflow:hidden; width:100px;height:100px}
.option_image:hover{overflow:scroll;}
.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>
  </div>
</div>