CSS-Only Picture/Thumbnail Gallery

Question

Although I've looked at many CSS-only scripts, I cannot figure out how to display the first image by default rather than have a blank space when this first opens. This must be CSS only - javascript and other "active content" not allowed. Please advise.

.container {
  width: 600px;
  position: relative;
}

.gallerycontainer {
  position: relative;
  height: 600px;
  /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img {
  border: 1px solid white;
  margin: 0 5px 5px 0;
}

.thumbnail:hover {
  background-color: transparent;
}

.thumbnail:hover img {
  border: none;
}

.thumbnail span {
  /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: none;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span {
  /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 150px;
  /*position where enlarged image should offset horizontally */
  z-index: 50;
}

user_1891677 · Answer

.container:not(:hover) .thumbnail:first-child img + span {
    visibility: visible;
    left: 150px;
}
.container {
    width: 134px;
}

... should do it.

If width:134px; on .container is a problem, add a margin-right to it to compensate for the missing width.

To fix the hover issue on shorter images and the thumbs from jumping, you might want to add a few more lines, resulting in:

.container:not(:hover) .thumbnail:first-child img + span {
    visibility: visible;
    left: 150px;
}
.container {
    width: 134px;
    display: flex;
    flex-wrap: wrap;
}
.thumbnail:hover > img {
    border: 1px solid transparent;
}

Updated snippet:

.container {
  width: 134px;
  margin-right: 466px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.container:not(:hover) .thumbnail:first-child img + span {
    visibility: visible;
    left: 150px;
}
.gallerycontainer {
  position: relative;
  height: 600px;
  /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img {
  border: 1px solid white;
  margin: 0 5px 5px 0;
}

.thumbnail:hover {
  background-color: transparent;
}

.thumbnail:hover > img {
  border: 1px solid transparent;
}

.thumbnail span {
  /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span {
  /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 150px;
  /*position where enlarged image should offset horizontally */
  z-index: 50;
}

Note: this code needs to be loaded/applied at the end of your CSS. Or to modify the properties in your current CSS.

user_2930477 · Answer

Rebuilt from scratch

Compatibility: Tested in Chrome, Firefox, IE11 and Edge. Will work with all non-ancient browsers.

Here is the full snippet of what we are building below!

Some simple transitions smooth everything out.

.gallery {
  columns: 2;
  column-gap: 0;
  width: 300px;
  margin: 20px 0 0 20px;
  transition: width .1s;
}

.gallery>.thumb {
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 10px 10px;
  cursor: pointer;
}

.gallery>.full {
  position: fixed;
  top: 20px;
  left: 340px;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
  transition: opacity .3s, width .3s, left .1s;
}


/* Hide first image when other thumbnail is hovered*/

.gallery:hover>.full:nth-child(2) {
  opacity: 0;
}


/*
1.No thumbnail is hovered:
  Show first image
2.Thumbnail is hovered
  Show image directly after hovered thumbnail
3.First thumbnail is hovered
  Show first image when first thumbnail is hovered
*/

.gallery>.full:nth-child(2),
.gallery>.thumb:hover+img,
.gallery>.thumb:first-child:hover+.full {
  opacity: 1;
}

@media only screen and (max-width: 925px) {
  .gallery>.full {
    left: 240px;
    transition: left .1s .05s
  }
  .gallery {
    width: 200px;
  }
}


/*Example styles */

body {
  margin: 0;
  background: #001f3f;
}

The HTML

If you don't need to add anything to the image such as a text caption, then you can reduce the markup needed to the bare minimum; one container div with two images for each picture, one small and one large, like so:

(If you need to add caption text to the full size image then you can keep wrapping the full sized images and change the CSS used here appropriately.)

The CSS

Show the first full size image if nothing is selected:

.gallery > .full:nth-child(2) {
  opacity: 1;
}

Here is some information on nth-child.

Hide the first image when other other thumbnails are hovered:

.gallery:hover > .full:nth-child(2) {
  opacity: 0;
}

This actually hides the first full image when the gallery is hovered. This covers any of the thumbnails being hovered.

Three selectors show the correct full size image when its thumbnail is hovered:

.gallery > .full:nth-child(2),
.gallery > .thumb:hover + img,
.gallery > .thumb:first-child:hover + .full{
  opacity: 1;
}

Always show the first full size image
Show the full size image that is directly after the hovered thumbnail
Make sure that the first image is show when its thumbnail is hovered. This overrides that gallery hover hiding selector.

The two columns of thumbnails

Use CSS columns:

.gallery  {
  columns: 2;
  column-gap: 0;
  width: 300px;
  margin: 20px 0 0 20px;
}

.gallery > .thumb {
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 10px 10px;
  cursor: pointer;
}

This displays two columns of images and spreads them evenly over 300px of width. The 100% width gets divided in two by the columns so they are the correct size. The padding is absorbed into the width thanks to box-sizing: border-box.

Here is some information on CSS columns and box sizing.

Display the full size images in the correct location:

.gallery > .full {
  position: fixed;
  top: 20px;
  left: 340px;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
}

The images are fixed to the top and pushed to the right of the thumbnails with left. They will scroll. They are hidden by default with opacity and pointer-events: none means your cursor cannot interact with the images and they wont show when they themselves are hovered. The viewport width unit (vw) ensures the images will resize to suit the viewport.

Reduce the size when the viewport gets smaller:

@media only screen and (max-width : 925px){
  .gallery > .full {
    left: 240px; 
  }  
  .gallery {
    width: 200px;
  }
}

Here is more information on @media.

The full example again!

.gallery {
  columns: 2;
  column-gap: 0;
  width: 300px;
  margin: 20px 0 0 20px;
  transition: width .1s;
}

.gallery>.thumb {
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 10px 10px;
  cursor: pointer;
}

.gallery>.full {
  position: fixed;
  top: 20px;
  left: 340px;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
  transition: opacity .3s, width .3s, left .1s;
}


/* Hide first image when other thumbnail is hovered*/

.gallery:hover>.full:nth-child(2) {
  opacity: 0;
}


/*
1.No thumbnail is hovered:
  Show first image
2.Thumbnail is hovered
  Show image directly after hovered thumbnail
3.First thumbnail is hovered
  Show first image when first thumbnail is hovered
*/

.gallery>.full:nth-child(2),
.gallery>.thumb:hover+img,
.gallery>.thumb:first-child:hover+.full {
  opacity: 1;
}

@media only screen and (max-width: 925px) {
  .gallery>.full {
    left: 240px;
    transition: left .1s .05s
  }
  .gallery {
    width: 200px;
  }
}


/*Example styles */

body {
  margin: 0;
  background: #001f3f;
}

user_6782599 · Answer

Just add following in first span under a class=thumbnail to show first image by default:

.container .thumbnail:first-child span{
    visibility: visible;
    z-index: 49;
    left: 150;
}