questions

Highlight image when hover on table row

Rate this post

I have WordPress web build on elementor. In left column is image. In right column there is table.

When I hover on table first row, image on left should change.

When hover on second row, image on left change for another.

Same with third row.

My css for image:

.first img:after {
content: url(/wp-content/uploads/2021/03/flat1.png)!important;
position: absolute;
top: 0;
left: 0;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
opacity: 0.9;
background-size: contain !important;
opacity: 0;

}

My css for table to stay colored after hover:

#table tr:hover td {
background: #5bbce2!important;
color: white;
cursor: pointer;

}

I am not sure how to put this together to achieve effect.

 

✔️Solution:

To get an image showing when you hover over an element you can use a pseudo after element – but positioned in relation to an overall container, not in relation to the element you have hovered specifically. This allows you to place the image ‘outside’ the table row which is what you need in this case.

In this snippet space is reserved for an image on the left, followed by the table. Obviously you will want to size things to suit your case. Background images are used instead of the content property and are sized to always be contained within the image container, whatever their aspect ratio.

 

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-container, .table-container {
  width: 45%;
  height: 100%;
  display: inline-block;
}
#table tr:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat no-repeat;
}

#table tr:nth-child(1)::after {
  background-image: url(https://picsum.photos/id/10/1024/768);
}
#table tr:nth-child(2)::after {
  background-image: url(https://picsum.photos/id/100/768/1024);
}
#table tr:nth-child(3)::after {
  background-image: url(https://picsum.photos/id/1001/1024/768);
}
#table tr:nth-child(4)::after {
  background-image: url(https://picsum.photos/id/1002/768/768);
}

#table tr {
  background-color: #eeeeee;
}

#table tr:hover td{
  background: #5bbce2;
  color: white;
  cursor: pointer;
}
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-container, .table-container {
  width: 45%;
  height: 100%;
  display: inline-block;
}
#table tr:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat no-repeat;
}

#table tr:nth-child(1)::after {
  background-image: url(https://picsum.photos/id/10/1024/768);
}
#table tr:nth-child(2)::after {
  background-image: url(https://picsum.photos/id/100/768/1024);
}
#table tr:nth-child(3)::after {
  background-image: url(https://picsum.photos/id/1001/1024/768);
}
#table tr:nth-child(4)::after {
  background-image: url(https://picsum.photos/id/1002/768/768);
}

#table tr {
  background-color: #eeeeee;
}

#table tr:hover td{
  background: #5bbce2;
  color: white;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
  <div class="image-container">
  </div>
  <div class="table-container">
    <table id="table">
      <tr class="first"><td>First row</td><td>First row</td><td>First row</td></tr>
      <tr class="second"><td>Second row</td><td>Second row</td><td>Second row</td></tr>
      <tr class="second"><td>Third row</td><td>Third row</td><td>Third row</td></tr>
      <tr class="second"><td>Fourth row</td><td>Fourth row</td><td>Fourth row</td></tr>
    </table>
  </div>
</div>

Leave a Reply

Your email address will not be published.

Back to top button