How do I get the enlarged image to back back to the thumb image?

Hi from 24 degrees C sunny York UK :smile:

The below illustration shows what I’d like to do but here goes…

In the grid of bride images (The first two are enabled) I would like to be able to click on the enlarged image (which appears when you click on the thumb) of the bride for it to then pop back to the thumb if that makes sense.

I had to move the position of the enlarged image via Line 373 of the CSS but now the user cant make it shrink back to the thumb :frowning: without clicking outside the enlarged image.

Is there a way so that when the user clicks on the enlarged image it shrinks back to the thumb?


1 Like

Your last threads Codepens has had all images unloaded no matter what, making any test of your code impossible without faking them. That leaves me to look at your code to see what’s going on.

It should work that way already. Click on the thumb is recieved by the anchor, the anchor gets focus and positions the image out and collapse as it becomes empty. Click on image/elsewhere again should remove focus from its anchor.

The last change I suggested was to move the image’s position:relative reference from the list/table to the li/table-cell in order to not have it popup under the mouse, because the image would remove focus from the anchor on mouse-up. - Perhaps you can try move the position:relative back to the ul/table container and see if the image absolute positioned place can be set away from the mouse in a working manner?

As I said your Codepen hasn’t worked in my setup for a while.

Yes It does disappear but only when you click outside the enlarged image, I’m looking for a way for the enalrged image to vanish / go back to the thumb when that is clicked on too. Users may end up clicking on the enlarged image and wonder why it isn’t doing anything :frowning:

But if your suggesting my codepen is causing the error then I’m totally lost :frowning:

Hi, David.

I’m using Firefox and to me, the images behave the way you want them to, ie. the thumb enlarges when clicked and closes when clicked again. At this time, I see the larger view well below the table… not very convenient.

Speaking for myself, codepen is not causing a problem (I don’t believe), it is simply hard to work with and troubleshoot. We/I have to create a working page from the codepen that will run on my PC to evaluate the behavior of the code using my browser’s dev tools

Thanks @ronpat guess Codepen is misleading me :frowning: Good news then, if the large image disappears when clicked on its all good :smile:

Thank you for looking into this :slight_smile:

CodePen isn’t misleading you. I just tried the page in Chrome and it behaves as you describe. So there is likely some more code that can be cleaned up a bit to make it work consistently cross-browser, as they say.

I’ll look at it some more and see if I spot anything. I’ll also post the page that I’m using so you can double check it and perhaps @Erik_J will be able to see something that I am missing. (@Erik_J is VERY good!)

OrangeRow-nightwing.html (13.8 KB)

1 Like

@ronpat Yes! I can see from your work it does behave correctly, Thank you :slight_smile: hope I’ve not added / deleted something in my code pen to jinx it!

It behaves correctly in Firefox but not so in Chrome, which is consistent with your CodePen… except for the odd placement of the larger image in Firefox. So, something has changed.

Oh dear this I feared, I have no idea what i may have changed, i feel another coffee coming on :frowning:

On holiday now for a week so will return to this with a fresh mind!

@ronpat thanks for the page download. Maybe we need to hinder the anchor getting the mouseclick when it has focus?

@Nightwing there are some inconsistency in the code, we’ll help fix that too when you’re back. Have a nice holiday.

1 Like

Thanks again, edited the below in the page you posted for download: OrangeRow-nightwing.html (13.7 KB)

I tried hinder the focused anchor get mouse instead of the popup image by a tabindex on the image to enable it to get the mouse and remove the anchor-focus. Example:

/* Sitepoint grid layout help */
.picgrid {
  position: relative; /* moved from list item */
  z-index: 1; /* raise local stacking's bottom level to keep the thumbs visible */
  display: table;
  border-spacing: 16px 16px;
  background-color: #bdf;
  margin-left: auto;
  max-width: 800px;
.picgrid ul {
  display: table-row;
.picgrid ul li {
  display: table-cell;
  padding: 0%;
.picgrid ul li img {
  position: relative; /* to enable z-index */
  z-index:-1; /* sink and let the anchor be on top */
  border: 0;
  width: 150px;
  height: auto;
.picgrid ul li a:focus img {
  position: absolute; /* now referring the table container */
  z-index: 1; /* view on top of table */
  right: 0;
  bottom: auto;
  left: 0;
  margin: auto;
  border:8px solid #bdf;
  height: auto;
  max-width: 750px;


  <!-- Sitepoint grid help-->
  <div class="picgrid">
      <li><a href="#"><img tabindex="0" src="" alt="" /></a></li> <!-- added tabindex to have the image move focus from the anchor -->
      <li><a href="#"><img tabindex="0" src="" alt="" /></a></li>
      <li><a href="#"><img tabindex="0" src="" alt="" /></a></li>
      <li><a href="#"><img tabindex="0" src="" alt="" /></a></li>

There is an error in my code. It was originally in Nightwing’s code. I spotted it with Firebug but failed to transcribe it to my notes; thus it remained in the code. My bad. The error prevents the thumbs from shrinking as the width narrows in Firefox. Chrome is OK . Go figure.

.picgrid ul li img {
    position: relative; /* to enable z-index */
    z-index:-1; /* sink and let the anchor be on top */
    border: 0;
/*    width: 150px;  /* DELETE Me.  I should be width:100% */
    width:100%;  /* ADD Me */
    height: auto;

This attachment uses Erik’s code and changes only the width shown in this post.

OrangeRow2-nightwing.html (13.7 KB)

1 Like

Thank you so much @ronpat & @Erik_J Your solutions fixed the problem regarding the grid of images :slight_smile:

The first image on the grid has the fix, I’ll roll your solution into the other images before go live, kust needed to test here first. Again thank you for taking time out to fix this for me!

The first image on the grid has the fix

One little detail left that slipped my mind. :smile:
If clicking the thumb eventually makes the page move its scroll position, it is caused by the thumb-link’s empty fragment-target. If you want to avoid that jump, just target a non existing fragment like: href=“#nogo” instead:

    <a href="#nogo"><img tabindex="0" src="" alt="" /></a>

Thanks Erik for the upgrade :slight_smile:

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