どのようにループ内でマウスをホバーしている間に画像サイズを変更しますか？

Question

私は以下のコードにJavascriptを適用すると、それは最初の画像サイズが変化しても、私のマウスは

<div class="container"> 
    <div class="row"> 
     @foreach($gigs as $gig) 
     <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12 gigbox"> 
      <div class="panel panel-default" style="height: 285px"> 
       <img src="{{URL::asset($gig->image)}}" id="img" width="100%" onmouseover="changesize()" height="160" alt=""> 
       <ul class="skillUl"> 
        <li class="gigtitle" style="list-style: none"><a href="{{route('gig',['gig_id'=>$gig->id, 'gig_title'=>$gig->gigtitle])}}"> I will {{$gig->gigtitle}}</a></li> 
        <a class="startingFrom" href="{{route('gig',['gig_id'=>$gig->id, 'gig_title'=>$gig->gigtitle])}}">Starting From <Span class="price"> Rs {{$gig->price}}</Span></a> 
       </ul> 
      </div> 
     </div> 
     @endforeach 
    </div> 
</div> 

JavaScriptコードはここに

<script> 
    function changesize() { 
     document.getElementById("img").style.width = "130px"; 
    } 
</script> 

Answer 1

CSSのサンプル

ある任意の画像の上にマウスを移動さのみ最初の画像への影響

img { transition: all .2s ease-in-out; } 
img:hover { transform: scale(1.1); } 

Answer 2

id="img"で複数の要素を作成するループを使用しています。 idは、任意のページで一意であるはずです。あなたは代わりにclass="img"を使用してgetElementsByClassName()メソッドを使用する必要があります。

document.getElementsByClassName("img").style.width = "130px"; 

ます。また、CSSを使用するには、フランク・Wisniewskiのの提案を検討すべきです。あなたはおそらくあなたがjavascriptなしで記述したもののほとんどまたはすべてを達成することができます。