Gradient transitions and image overlays #image #css #gradient

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.pug

- var image = "https://source.unsplash.com/random?surf"
doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body
    h1 To bottom black
    .flex
      each item,index in Array(13)
        div
          div.overlay(class=`overlay-black-${index+1}`)
          img(src=image, alt="")
    h1 To top black
    .flex
      each item,index in Array(13)
        div
          div.overlay(class=`overlay-black-top-${index+1}`)
          img(src=image, alt="")
    h1 To right black
    .flex
      each item,index in Array(13)
        div
          div.overlay(class=`overlay-black-right-${index+1}`)
          img(src=image, alt="")
    h1 To bottom white
    .flex
      each item,index in Array(13)
        div
          div.overlay(class=`overlay-white-${index+1}`)
          img(src=image, alt="")
    h1 To top white
    .flex
      each item,index in Array(13)
        div
          div.overlay(class=`overlay-white-top-${index+1}`)
          img(src=image, alt="")
    h1 Gradient Sandwich (visible in center, transitions on top/bottom)
    .flex
      each item,index in Array(16)
        div
          div.overlay(class=`overlay-sandwich-${index+1}`)
          img(src=image, alt="")

script.js

‎‎​

style.scss

:root {
  --50: 50%;
  --60: 60%;
  --70: 70%;
  --80: 80%;
  --90: 90%;
}
 img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
  display: block;
}

.flex {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
div {
  position: relative;

}
.flex > div {
  width: 30%;
  border: 2px dashed black;
}
.overlay {
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}
$black-bottom-map: (
  "1": linear-gradient(to bottom, transparent, black),
  "2": linear-gradient(to bottom, transparent, black 50%),
  "3": linear-gradient(to bottom, transparent, black 60%),
  "4": linear-gradient(to bottom, transparent, black 70%),
  "5": linear-gradient(to bottom, transparent, black 80%),
  "6": linear-gradient(to bottom, transparent, black 90%),
  "7": linear-gradient(to bottom, transparent, black 90%),
  "8": linear-gradient(to bottom, transparent 50%, black 50%),
  "9": linear-gradient(to bottom, transparent 60%, black 60%),
  "10": linear-gradient(to bottom, transparent 70%, black 70%),
  "11": linear-gradient(to bottom, transparent 80%, black 80%),
  "12": linear-gradient(to bottom, transparent 90%, black 90%),
  "13": linear-gradient(to bottom, transparent 90%, black 90%)
);
$black-top-map: (
  "1": linear-gradient(to top, transparent, black),
  "2": linear-gradient(to top, transparent, black 50%),
  "3": linear-gradient(to top, transparent, black 60%),
  "4": linear-gradient(to top, transparent, black 70%),
  "5": linear-gradient(to top, transparent, black 80%),
  "6": linear-gradient(to top, transparent, black 90%),
  "7": linear-gradient(to top, transparent, black 90%),
  "8": linear-gradient(to top, transparent 50%, black 50%),
  "9": linear-gradient(to top, transparent 60%, black 60%),
  "10": linear-gradient(to top, transparent 70%, black 70%),
  "11": linear-gradient(to top, transparent 80%, black 80%),
  "12": linear-gradient(to top, transparent 90%, black 90%),
  "13": linear-gradient(to top, transparent 90%, black 90%)
);
$black-right-map: (
  "1": linear-gradient(to left, transparent, black),
  "2": linear-gradient(to left, transparent, black 50%),
  "3": linear-gradient(to left, transparent, black 60%),
  "4": linear-gradient(to left, transparent, black 70%),
  "5": linear-gradient(to left, transparent, black 80%),
  "6": linear-gradient(to left, transparent, black 90%),
  "7": linear-gradient(to left, transparent, black 90%),
  "8": linear-gradient(to left, transparent 50%, black 50%),
  "9": linear-gradient(to left, transparent 60%, black 60%),
  "10": linear-gradient(to left, transparent 70%, black 70%),
  "11": linear-gradient(to left, transparent 80%, black 80%),
  "12": linear-gradient(to left, transparent 90%, black 90%),
  "13": linear-gradient(to left, transparent 90%, black 90%)
);
$white-bottom-map: (
  "1": linear-gradient(to bottom, transparent, white),
  "2": linear-gradient(to bottom, transparent, white 50%),
  "3": linear-gradient(to bottom, transparent, white 60%),
  "4": linear-gradient(to bottom, transparent, white 70%),
  "5": linear-gradient(to bottom, transparent, white 80%),
  "6": linear-gradient(to bottom, transparent, white 90%),
  "7": linear-gradient(to bottom, transparent, white 90%),
  "8": linear-gradient(to bottom, transparent 50%, white 50%),
  "9": linear-gradient(to bottom, transparent 60%, white 60%),
  "10": linear-gradient(to bottom, transparent 70%, white 70%),
  "11": linear-gradient(to bottom, transparent 80%, white 80%),
  "12": linear-gradient(to bottom, transparent 90%, white 90%),
  "13": linear-gradient(to bottom, transparent 90%, white 90%)
);
$white-top-map: (
  "1": linear-gradient(to top, transparent, white),
  "2": linear-gradient(to top, transparent, white 50%),
  "3": linear-gradient(to top, transparent, white 60%),
  "4": linear-gradient(to top, transparent, white 70%),
  "5": linear-gradient(to top, transparent, white 80%),
  "6": linear-gradient(to top, transparent, white 90%),
  "7": linear-gradient(to top, transparent, white 90%),
  "8": linear-gradient(to top, transparent 50%, white 50%),
  "9": linear-gradient(to top, transparent 60%, white 60%),
  "10": linear-gradient(to top, transparent 70%, white 70%),
  "11": linear-gradient(to top, transparent 80%, white 80%),
  "12": linear-gradient(to top, transparent 90%, white 90%),
  "13": linear-gradient(to top, transparent 90%, white 90%)
);

$sandwich: (
  "1":linear-gradient(to bottom, white 10%, transparent, white 90%),
  "2":linear-gradient(to bottom, white 20%, transparent, white 80%),
  "3":linear-gradient(to bottom, white 25%, transparent, white 75%),
  "4":linear-gradient(to bottom, white 30%, transparent, white 70%),
  "5":linear-gradient(to bottom, black 10%, transparent, black 90%),
  "6":linear-gradient(to bottom, black 20%, transparent, black 80%),
  "7":linear-gradient(to bottom, black 25%, transparent, black 75%),
  "8":linear-gradient(to bottom, black 30%, transparent, black 70%),
  "9":linear-gradient(to bottom, black 10%, transparent, white 90%),
  "10":linear-gradient(to bottom, black 20%, transparent, white 80%),
  "11":linear-gradient(to bottom, black 25%, transparent, white 75%),
  "12":linear-gradient(to bottom, black 30%, transparent, white 70%),
  "13":linear-gradient(to bottom, white 10%, transparent, black 90%),
  "14":linear-gradient(to bottom, white 20%, transparent, black 80%),
  "15":linear-gradient(to bottom, white 25%, transparent, black 75%),
  "16":linear-gradient(to bottom, white 30%, transparent, black 70%),
);


@each $key,$val in $black-bottom-map {
  .overlay-black-#{$key} {
    background: $val;
  }
}

@each $key,$val in $black-top-map {
  .overlay-black-top-#{$key} {
    background: $val;
  }
}
@each $key,$val in $black-right-map {
  .overlay-black-right-#{$key} {
    background: $val;
  }
}
@each $key,$val in $white-bottom-map {
  .overlay-white-#{$key} {
    background: $val;
  }
}
@each $key,$val in $white-top-map {
  .overlay-white-top-#{$key} {
    background: $val;
  }
}
@each $key,$val in $sandwich {
  .overlay-sandwich-#{$key} {
    background: $val;
  }
}