VmC VmC - 2 months ago 8
CSS Question

Hover effect applies to all images

I have this code here:



#mg1 {
margin-left: 3%;
}
#mg1:hover {
margin-top: 4%;
}

<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>

<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">

</div>





The hover effect should only affect the image with the id="mg1", but instead it affects all my images; Why is this happening?

Answer

#mg1{
margin-left:3%;
position:relative;
}

#mg1:hover{
 
margin-top:4%;
}
   
img{

  float:left;
  
}
<div id="section1">
       <center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>

        <img src="321321321321.png" width="200" height="150" id="mg1">

        <img src="ewqfh.png" width="200" height="150" id="mg2">
        <img src="2321321.png" width="200" height="150" id="mg3">

    </div>

Comments