Rails CSS/SCSS transformant div, mais pas image imbriquée (rails)

Question

J'essaie de configurer une image à l'intérieur d'un div principal où planer au-dessus de la div fera augmenter l'image ci-dessus pendant 2 secondes. Seule la div elle-même (la frontière) échelles, pas l'image jointe elle-même. Tenter de mettre à l'échelle l'image seule n'a aucune action à ce jour. Ceci est fait dans Rails 5.1.2. Qu'est-ce que je rate?

vues/communauté/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

figured it out!

L'image a été imbriqué dans la div, mais devait être jointe afin de répondre en tandem:

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 
})