CSS/SCSS 레일 div 변환 중첩 된 이미지 (레일)

Question

div 위로 마우스를 가져 가면 첨부 된 이미지 크기가 2 초 이상 올라가는 메인 div 안에 이미지를 설치하려고합니다. 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 안에 중첩하지만 협력하여 대응하기 위해 추가 할 필요했다 :

자바 스크립트/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 
})