CSS/SCSS導軌轉換div，但沒有嵌套的圖像（導軌）

Question

我想設置一個主div的圖像，在div上懸停將使附加的圖像放大超過2秒。只有div本身（邊框）纔會縮放，而不是附加的圖像本身。在撰寫本文時，嘗試單獨調整圖像沒有任何作用。這是在Rails 5.1.2中完成的。我錯過了什麼？

的意見/社區/ index.html.erb：

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

樣式表/ 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 
})