flex_ flex_ - 3 months ago 12
CSS Question

image changes position on hover using float left

So i’m creating an image gallery with float left and everything is working great but then when i get to second row of images things go haywire. whenever i hover on image on the first row any image on second row position will get messed up by itself. here is the codepen. (my recent art looks way better than the one in codepen but you will get the idea whenever you hover over the image)
try hovering over any image and see how second row image gets messed up..
http://codepen.io/anon/pen/ZpGrVA

<html>
<body style="background-color: rgb(242, 242, 242);">
<style>

.middlegallery{

top:250px;
position: absolute;
}
.mainpanel{
left: 50%;
right:50%;
display:block;
padding: 15px;
/*top: 125px;*/
font-size: 16px;
background-color: #f5f5f5;
border: 1px solid #d8d8d8;
line-height: 1.5;
border-radius: 5px 3px 0 0;
position: relative;
font-family: Helvetica, Arial, sans-serif;
}

.gallery-image{
margin:5px;
border: 1px solid #ccc;
zoom: 1;
float:left;
cursor:pointer;
position:relative;
}
img:hover{
border:1px solid #777;
}
img{

}
.middlewrapper{
margin:0 auto;
width:95%;
padding-top: 125px;
}



</style>
<div class="middlewrapper">
<div class="col-sm-6">
<div class="mainpanel"><h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5></div>
</div>
<div class="middlegallery">
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
<div class="gallery-image">
<img src="http://placehold.it/240x220">
</div>
</div>
</div>




Answer

Use a transparent border for img and you solve it- your hover border is causing the problem

    img:hover{
        border:1px solid #777;
    }
    img{
      border: 1px solid transparent;
    }

A suggestion- add display: block or vertical-align: top to img to remove the whitespace characteristic of inline elements below the image.

Let me know your feedback on this. Thanks!

* {
  box-sizing: border-box;
}
.middlegallery {
  top: 250px;
  position: absolute;
}
.mainpanel {
  left: 50%;
  right: 50%;
  display: block;
  padding: 15px;
  /*top: 125px;*/
  font-size: 16px;
  background-color: #f5f5f5;
  border: 1px solid #d8d8d8;
  line-height: 1.5;
  border-radius: 5px 3px 0 0;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
}
.gallery-image {
  margin: 5px;
  border: 1px solid #ccc;
  zoom: 1;
  float: left;
  cursor: pointer;
  position: relative;
}
img:hover {
  border: 1px solid #777;
}
img {
  border: 1px solid transparent;
  display: block;
}
.middlewrapper {
  margin: 0 auto;
  width: 95%;
  padding-top: 125px;
}
<html>

<body style="background-color: rgb(242, 242, 242);">
  <div class="middlewrapper">
    <div class="col-sm-6">
      <div class="mainpanel">
        <h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5>
      </div>
    </div>
    <div class="middlegallery">

      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
    </div>
  </div>

</body>

</html>