Overlapping images in table cell

Get Started
1

Hello,

I’ve been trying to use the following code so I can place a deck of 6 images in a TABLE CELL.
But, the 6 images were placed outside the table.

That code was taken from sitepoint (“Overlapping 5 Images With Mouseover Effect”):

The code below was working fine without using a table.
But, I want to place that deck of 6 images in a TABLE CELL.

Also, when I was trying to associate a link (i.e., website) with each of those images,
I lost the concept of floating deck.

Any clues, please?

Thanks a lot for your time!


<style>
   .deck {overflow:hidden}
   .deck img {position:relative; float:left;  width:225px; height:400px}
   .deck img + img {margin-left: -200px;}
   .deck img:hover {z-index:9999; border:1px solid red; background: pink}
</style>

<td>
  <div class="deck">
	<img src="#" alt="testimage">

        <!-- same thing as above 6 times  //-->
  </div>
</td>
2

https://www.w3schools.com/cssref/pr_pos_overflow.asp

Note: The overflow property only works for block elements with a specified height.

I think, that means: display: block; or display: inline-block;

3

It shouldn’t make any difference if it is in a table-cell or not assuming you have the table sized correctly to achieve what you want. However it doesn’t sound like you should be using a table-cell for this anyway as the data is not tabular from what you have shown.

You would need to float the anchor if it wraps the image.

Put up a working example on codepen or similar as the code you posted seems to be working albeit that it is incomplete.

4

Thank you so much for your time and replies!
I really appreciate that.

I had to use “position:absolute” and give precise values
for top and left. I went well :slight_smile:

Thanks a lot again!

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.