CSS/SCSS rails 变换 div，但不是嵌套图像 (rails)

Question

我正在尝试在主 div 中设置图像，将鼠标悬停在 div 上将使附加图像在 2 秒内放大。只有 div 本身（边框）缩放，而不是附加图像本身。在撰写本文时，尝试单独缩放图像没有任何作用。这是在 Rails 5.1.2 中完成的。我错过了什么？

views/community/index.html.erb:

<div class="scene">
    <div id="container1" class="image-div">
      <%= image_tag("hbehance.png", :id =>"first-image", :alt => "first symbol") %>
    </div>
</div>

stylesheets/community.css.scss:

.scene {
  position: relative;
  height: 35rem;
  margin: 1rem;
  width: 95%;
  left: 0;
  top: 0;
  background-image: asset_url("cityscape.jpeg");
  background-size: cover;
}

.image-div{
  position: absolute;
  bottom: 10%;
  width: 60px;
  height: 60px;
  border: 5px solid red;
}

img {
  position: absolute;
  width: 100%;
  transition: transform all 2s;
}

.image-div:hover {
  transform: scale(2);
}

Answer 1

想通了！

图像嵌套在 div 中，但需要附加图像才能一前一后地响应：

javascript/community.js:

document.addEventListener('DOMContentLoaded', function(){

  firstDiv = document.getElementById('container1');
  firstImage = document.getElementById('first-image');
  firstDiv.append(firstImage);

  function testJS(){
    firstDiv.style.left = "50%";
  }
  testJS();//tests that JS file connects properly when first setup
})

CSS/SCSS rails 变换 div，但不是嵌套图像 (rails)

CSS/SCSS rails transforming div, but not nested image (rails)

css

transform

hover

css-transforms