CODEWITHSUNDEEP
htmlcsshtml-table
Stéphane
Stéphane

Reputation: 20340

table cell size changes when popping up images using CSS

I have a HTML/CSS page -- no javascript -- where I'm attempting to display a table/grid of thumbnail images. When the user hovers the mouse over one of the image, I'd like the full-size image to be shown.

I created a fiddle to show where I'm at: https://jsfiddle.net/StephaneCharette/y50rn9g4/

The problem I don't know how to solve: when the popup image is shown, the height of the row is modified which pushes everything down.

I've managed to fix the width of each cell using table-layout:fixed; and then specifying a width for both the table and each cell in the first row. (Though I'm not certain I did that correctly.) But how do I prevent the height from changing?

table, th, td
{
  border:1px solid black;
  padding: 0.5em;
}
table
{
  border-collapse:collapse;
  table-layout: fixed;
  width: 1000px; // table-layout fixed seems to only works if you then give it a width
}
.thumb
{
  border: 1px solid black;
  width: 320px;
  height: auto;
  position: relative; // need to specify 'position' to use z-index
  z-index: 0;
}
.thumb:hover
{
  width: auto;
  height: auto;
  z-index: 999;
  border-radius: 10px;
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
}
<table>
  <tr>
    <th style="width: 10em;">th1</th>
    <th style="width: 330px;">th2</th>
    <th style="width: 330px;">th3</th>
    <th style="width: 330px;">th4</th>
  </tr>
  <tr>
    <th>row1</th>
    <td>some example text before the image <img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ambrosia_apples_2017_A3.jpg" />some example text after the image</td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Malus-Ananasrenette.jpg" /></td>
  </tr>
  <tr>
    <th>row2</th>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/4/41/Arkansas_Black_apples_%28cropped%29.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Aroma.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Malus-Boskoop_organic.jpg" /></td>
  </tr>
</table>

Upvotes: 0

Views: 95

Answers (3)

Marios Nikolaou
Marios Nikolaou

Reputation: 1336

Check my jsfiddle code here. Also on hover the images get full width and height which looks bad and covers everything else.I have set on hover, image width to 600px.

 .thumb:hover => width: 600px;

Upvotes: 0

Jignesh Panchal
Jignesh Panchal

Reputation: 1376

Just replace this style in your css

table, th, td {
    border: 1px solid black;
    padding: 0.5em;
    position: relative;
}

.thumb:hover {
    width: auto;
    height: auto;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 0;
    left: 0;
}

Upvotes: 2

FRM
FRM

Reputation: 1

you can add position:absolute to .thumb:hover https://jsfiddle.net/0pmjsybr/

Upvotes: 0

Related Questions