All geek questions in one place

CSS photo / thumbnail gallery only

Although I looked at many CSS-only scripts, I cannot figure out how to display the first image by default, and not an empty space when I first open it. It should be only CSS - javascript and other "active content" are not allowed. Please inform.

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

.gallerycontainer {
  position: relative;
  height: 600px;
  /*Add a height attribute and set to largest image 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;
}
<div class="gallerycontainer">
  <div class="container">
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
  </div>
</div>
Run codeHide result
+4
source share
3 answers
.container:not(:hover) .thumbnail:first-child img + span {
    visibility: visible;
    left: 150px;
}
.container {
    width: 134px;
}

... must do it.

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

To fix the problem of hovering over shorter images and thumbs from the jump, you may need 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 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;
}
<div class="gallerycontainer">
  <div class="container">
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x300" width="60" /><span><img src="http://www.placehold.it/500x300" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/400x500" width="60" /><span><img src="http://www.placehold.it/400x500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x350" width="60" /><span><img src="http://www.placehold.it/500x350" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x250" width="60" /><span><img src="http://www.placehold.it/500x250" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/350x500" width="60" /><span><img src="http://www.placehold.it/350x500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/450x500" width="60" /><span><img src="http://www.placehold.it/450x500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x200" width="60" /><span><img src="http://www.placehold.it/500x200" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x450" width="60" /><span><img src="http://www.placehold.it/500x450" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
  </div>
</div>
Run codeHide result

. / CSS. CSS.

+4

: Chrome, Firefox, IE11 Edge. - .

, !

.

.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;
}
<div class="gallery">
  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />

  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />

  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />
</div>
Hide result

HTML

- , , , ; div , , :

<div class="gallery">
  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />
</div>

( , CSS, .)

CSS

, :

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

nth-child.

, :

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

, . .

, :

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

CSS:

.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;
}

300 . 100% , . box-sizing: border-box.

CSS .

:

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

left. . opacity pointer-events: none , , , . (vw) , .

, :

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

@media.

!

.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;
}
<div class="gallery">
  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />

  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />

  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />
</div>
Hide result
+1

Just add the following to the first spanunder a class=thumbnailto show the first default image:

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

Source: https://habr.com/ru/post/1686594/

More articles:


All Articles