Search code examples
cssgridhoverrowmouseevent

How can to make an image hover in each row?

I wanna do this exactly

1

I'm triying to create a table of 3 columns and 8 rows without header. I want that each row shows a different image when putting the mouse on it. I'm using a builder website, the images are upload to builder.

The explain how to make an hover but when I put this in a grid, the function dissapears: https://support.cargo.site/Show-an-Image-on-Hover

<br>
  <div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
      <div grid-col="x10" grid-pad="0" class="">
          <div style="text-align: center">
              <h1>01</h1>
          </div>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>France</h1>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>1990</h1>
      </div>
  </div>
  <div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
      <div grid-col="x10" grid-pad="0" class="">
          <div style="text-align: center">
              <h1>02</h1>
          </div>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>Italy</h1>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>1998</h1>
      </div>
  </div>
<br>

Any help is welcome

Solution

  • ONLY WITH CSS

    With table border may have been too complex to manage. So I propose you this solution as you were already using div in your post.

    I am fixing the table in 1st container with class table.

    Then I am setting row without border-bottom except for the last child.

    Then I set the border inside cell.

    Adn finaly set the setting :hover as followed:

    .row:hover {
   border: 1px solid red;
 }
 .row:hover + .row {
   border-top: none;
 }

    The + is used to remove the top border of the previous sibling.

    To add the image, I simply add an img by row with that I show up when a row is hover.

    I also set the z-index more important on .cell to be sure that the table stays in front of the images

    DEMO:

    .table  {
  display:flex;
  flex-direction:column;
  width:400px;
}

.row{
  width: 100%;
  display:flex;
  flex-direction: row;
}
.row img{
  z-index: 1;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.row div{
  z-index: 2;
}
.row:last-child .cell{
  border-bottom: 1px solid black;
}
.cell:nth-last-child(2){
  border-right:1px solid black;
}
.cell{
  border:1px solid black;
  border-bottom: none;
  border-right: none;
}
.w-25{
  width:25%;
}
.w-50{
  width:50%;
}
.row:hover .cell {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}
.row:hover .cell:first-child {
  border-left: 1px solid red;
}
.row:hover .cell:nth-last-child(2) {
  border-right: 1px solid red;
}

.row:hover img{
  display: block;
}
    <div class="table">
  <div class="row">
    <div class="cell w-25">01</div>
    <div class="cell w-50">France</div>
    <div class="cell w-25">1990</div>
    <img src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" />
  </div>
  <div class="row">
    <div class="cell w-25">02</div>
    <div class="cell w-50">Italy</div>
    <div class="cell w-25">1998</div>
    <img src="https://media.istockphoto.com/vectors/family-on-bikes-in-park-vector-id1174981037" />
  </div>
</div>