如何在鼠标悬停循环中更改图像大小？

Question

When I apply Javascript on Below code it effect on only first image only first image size is change even my mouse is hovering over any image

<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 Code is here

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

Answer 1

css sample

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

Answer 2

You are using a loop to create multiple elements with id="img" . id s are supposed to be unique on any given page. You should instead use class="img" and use the getElementsByClassName() method:

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

You also should consider Frank Wisniewski's suggestion to use CSS. You can probably achieve most or all of what you've described without javascript.