grid-overflow/src/GridOverflow3D.css

A pure CSS solution for gallery masonry layout and grid layout. It has optional 3D hover effect, utility classes. Adjustable by CSS variables.

/*!  
    Grid Overflow ver: 1.2.7 -  https://github.com/Roman-Flossler/Grid-Overflow
    Copyright (c) 2023 Roman Flössler - Grid Overflow is licensed under MIT license 
*/

.gridOverflow {
  --itemMinWidth: 200px;
  --itemAspectRatio: 1;
  --gridGap: 10px;
  --linkActionIcon: "⤢";
  --itemRounding: 6px;
  --masonryItemHeight: 180px;
  margin: auto;
  display: grid;
  grid-gap: var(--gridGap);
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - var(--gridGap)), var(--itemMinWidth)), 1fr));
  grid-auto-flow: dense;
}

.go_gridItem {
  padding-bottom: calc(100% * var(--itemAspectRatio));
  height: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  border-radius: var(--itemRounding);
}

.go_gridItem > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
}

.go_gridItem-centered > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  hyphens: auto;
}

.go_caption {
  background-color: rgba(0, 0, 0, 0.5);
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  height: auto;
  color: white;
  box-sizing: border-box;
  line-height: 1.33em;
  padding: 0.15rem 4%;
  width: auto;
  text-align: center;
  position: absolute;
  hyphens: auto;
}

.go_caption-full {
  width: 100% !important;
  display: block;
}

.go_gridItem-panorama {
  grid-column: span 2;
  padding-bottom: calc(((100% - var(--gridGap)) / 2) * var(--itemAspectRatio));
}

.go_gridItem-vertigo {
  grid-row: span 2;
  padding-bottom: calc(100% * var(--itemAspectRatio) * 2 + var(--gridGap));
}
.go_gridItem-VIP {
  grid-column: span 2;
  grid-row: span 2;
  padding-bottom: calc(((100% - var(--gridGap))) * var(--itemAspectRatio) + var(--gridGap));
}

/* ---------- Masonry mode ---------- */

.go-masonry {
  gap: var(--gridGap);
  display: flex;
  flex-wrap: wrap;
}

.go-masonry .go_gridItem {
  padding-bottom: 0;
  display: flex;
  flex-grow: 1;
  height: var(--masonryItemHeight);
  flex-basis: fit-content;
}

.go-masonry .go_gridItem > * {
  position: static;
  flex-grow: 1;
  width: auto;
}

.go-masonry .go_gridItem-centered,
.go-masonry .go_gridItem-noImage {
  flex-basis: var(--itemMinWidth);
}

.go-masonry .go_caption {
  position: absolute;
}

/* ---------- link action icon ---------- */

.go-actionIcon > a.go_gridItem::after {
  content: var(--linkActionIcon);
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 111%;
  border-radius: 3px;
  line-height: 0.6em;
  font-family: sans-serif;
  opacity: 0.5;
  text-shadow: 0 0 3px #000000, 0 0 1px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 6px #000000, 0 0 16px #000000;
}

.go-actionIcon > a.go_gridItem:hover:after {
  opacity: 0.88;
}

.go-actionIcon > .go_gridItem::after {
  transition: all 0.13s ease-in;
}

.go-actionIcon > .go_gridItem:hover:after {
  transition: all 0.25s ease;
}

/* ---------- 3D anim effect ---------- */
/* transition definition */
.go-3Dfx > .go_gridItem,
.go-3Dfx > .go_gridItem > *,
.go-3Dfx > .go_gridItem::before {
  transition: all 0.13s ease-in;
}

.go-3Dfx > .go_gridItem:hover,
.go-3Dfx > .go_gridItem:hover > *,
.go-3Dfx > .go_gridItem:hover::before {
  transition: all 0.25s ease;
}

/* hover definition - skew and shadow */
.go-3Dfx > .go_gridItem:hover {
  box-shadow: 4px 6px 13px 1px rgba(13, 13, 13, 0.73);
  transform: skew(-2deg, -2deg) scale(0.965, 0.965);
  background: rgb(69, 69, 69);
}

.go-3Dfx > .go_gridItem-panorama:hover {
  transform: skew(-2deg, -1.22deg) scale(0.983, 0.96) !important;
}

.go-3Dfx > .go_gridItem-vertigo:hover {
  transform: skew(-1.2deg, -2deg) scale(0.965, 0.98) !important;
}

.go-3Dfx > .go_gridItem-VIP:hover {
  transform: skew(-1.2deg, -1.2deg) scale(0.978, 0.978) !important;
}

.go-3Dfx > .go_gridItem:hover > * {
  opacity: 1;
}

/* gradient overlay imitates a light reflection */
.go-3Dfx > .go_gridItem::before {
  content: "";
  position: absolute;
  background: linear-gradient(
    155deg,
    rgba(191, 252, 255, 0.33) 0%,
    rgba(212, 253, 255, 0.22) 23%,
    rgba(216, 253, 255, 0) 36%
  );
  transform: translate(-36%, -36%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.go-3Dfx > .go_gridItem:hover::before {
  transform: translate(-1%, -1%);
}

/* ---------- zoom effect ---------- */
.go-zoomFx > .go_gridItem:hover {
  transform: scale(1.036) !important;
  z-index: 6;
  border-radius: 3px;
  transition: all 0.13s ease-in;
}

.go-zoomFx > .go_gridItem {
  transition: all 0.1s ease-in;
}