Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
  <h1 style="float:left; display:block">| CSS FILTERS | CODEPEN CHALLENGE MAY 2024</h><h1 style="float:right; display:block">WEEK #1 - 4</h1>
  <div class="gallery-wrap">
    <div class="item item-1">
      <div class="caption">
        <h1>Frosted Glass Effect</h1>
        <p>This card has a frosted glass effect using the backdrop-filter property. Try hovering over it to see the effect change.</p>
      </div>
    </div>
    <div class="item item-2">
      <div class="caption">
        <h1>Frosted Glass Effect</h1>
        <p>This card has a frosted glass effect using the backdrop-filter property. Try hovering over it to see the effect change.</p>
      </div>
    </div>
    <div class="item item-3">
      <div class="caption">
        <h1>Frosted Glass Effect</h1>
        <p>This card has a frosted glass effect using the backdrop-filter property. Try hovering over it to see the effect change.</p>
      </div>
    </div>
    <div class="item item-4">
      <div class="caption">
        <h1>Frosted Glass Effect</h1>
        <p>This card has a frosted glass effect using the backdrop-filter property. Try hovering over it to see the effect change.</p>
      </div>
    </div>
    <div class="item item-5">
      <div class="caption">
        <h1>Frosted Glass Effect</h1>
        <p>This card has a frosted glass effect using the backdrop-filter property. Try hovering over it to see the effect change.</p>
      </div>
    </div>
  </div>
  
  <div class="challenge">
    <p>
      <a href="https://codepen.io/challenges/2024/may" target="_blank">codepen.io/challenges/2024/may</a> 
      <a style="float:right" href="https://codepen.io/vainsan" target="_blank">codepen.io/vainsan</a>
    </p>
  </div>
</div>
<a class="btn-social-cp" href='https://codepen.io/vainsan/' target='_blank' title='https://codepen.io/vainsan/'>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>codepen.io/vainsan</title><path fill="#ffdd40" d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031c-.005.016-.01.031-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739c0-.028.002-.055.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12 0 18.627 5.373 24 12 24c6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/></svg></a>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root{
  --color-1:#283242;
  --color-2:#ffdd40;
  --color-3:#131417;
}

$line-contrast: 500%;
$photo-brightness: 90%;
$photo-contrast: 150%;
$photo-blur: 3px;
$blend-mode: screen;
$point-size: 1px;
$point-color: #333;
$point-spacing: 8px;

::-webkit-scrollbar {
  width: 6px;
  background-color: var(--color-1);
}
::-webkit-scrollbar-button {
  background-color: var(--color-1);
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: var(--color-2);
}
*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.283' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(225, 10%, 8%, 1)'/><path d='M46.189-20L57.736 0M46.189 20l11.547 20m-46.189 0l11.547 20M11.547 0l11.547 20m40.415 30H40.415M28.868 30H5.774m23.094-40H5.774m57.735 20H40.415m0 20L28.868 50m11.547-60L28.868 10m46.188 0L63.509 30M5.774 10L-5.773 30m75.056 10H46.189L34.64 20 46.19 0h23.094C73.13 6.667 76.98 13.333 80.83 20zM57.736 60H34.64L23.094 40l11.547-20h23.095c3.848 6.667 7.698 13.333 11.547 20L57.736 60zm0-40H34.64L23.094 0l11.547-20h23.095L69.283 0c-3.87 6.7-8.118 14.06-11.547 20zM34.64 60H11.547L0 40l11.547-20h23.094L46.19 40 34.64 60zm0-40H11.547L0 0l11.547-20h23.094L46.19 0 34.64 20zM23.094 40H0l-5.773-10-5.774-10L0 0h23.094l11.547 20-11.547 20z'  stroke-width='1' stroke='hsla(225, 5%, 10%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  user-select:none;
  font-family: 'Switzer', sans-serif;
}
h1{
  position: relative;
  font-family: 'Khand', sans-serif;
  font-size: calc(1vw + 1vh + .5vmin);
  text-transform: uppercase;
  padding-bottom:1rem;
  color: #ffdd40;
}
.container{
  padding: 3rem 0;
  margin: 0 auto;
  width: 80vw;
}
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
  border-radius:2rem;
  box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.25 );
  background:rgba( 255, 255, 255, 0.0 );
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  overflow:hidden;
  mix-blend-mode: $blend-mode;
  filter: grayscale(1) saturate(0) brightness($photo-brightness) contrast($photo-contrast);
  transition: flex 0.4s cubic-bezier(.32,.79,.38,.99), filter 0.5s ease-in;
  &:hover {
    flex: 7;
    filter:grayscale(0) saturate(1.3) blur(0px);
  }
  &:hover .caption {
    opacity:1;
  }
  &:before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle closest-side, $point-color $point-size, transparent $point-size);
    background-size: $point-spacing $point-spacing;
    filter: contrast($line-contrast);
    transition: opacity .2s ease; 
    opacity:.3;
    pointer-events:none;
  }
  &:hover:before {
    opacity:0;
  }
}
.caption {
  position:fixed;
  left:.5rem;
  right:.5rem;
  bottom:0;  
  margin:1rem;
  padding:1rem;
  color:#eee;
  border:solid 1px rgba( 255, 255, 255, 0.25 );
  border-radius: 2rem;
  box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.25 );
  backdrop-filter: blur( 4.0px );
  transition: opacity 0.2s ease, backdrop-filter 1s ease;
  /*
  transition-delay:1s;
  */
  opacity:0;
  &:hover {
    backdrop-filter: blur( 0.0px );    
  }
  & p {
    width:100%;
  }
  & h1 {
    color: rgba(65, 187, 245, 1);
  }
}

.item-1 { 
  border-radius:2rem 0rem 0rem 2rem;
  background-image: url('https://images.pexels.com/photos/1647962/pexels-photo-1647962.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}
.item-2 { 
  background-image: url('https://images.pexels.com/photos/4780712/pexels-photo-4780712.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}
.item-3 { 
  background-image: url('https://images.pexels.com/photos/1647970/pexels-photo-1647970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}
.item-4 { 
  background-image: url('https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}
.item-5 { 
  border-radius:0rem 2rem 2rem 0rem;
  background-image: url('https://images.pexels.com/photos/1670845/pexels-photo-1670845.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}

.challenge {
  font-weight: normal;
  padding: 1.5rem;
  margin-top:2rem;
  backdrop-filter: blur( .0px );
  /*
  background:#1e1f26;
  background: rgba(37,33,64,0.1);
  */
  border:solid;
  border-image: linear-gradient(to bottom, rgba(255,221,64,1) 0%, rgba(255,221,64,0) 100%);
  padding: 9px;
  color:#ffdd40;
  & a {
    color:#ffdd40;
    text-decoration:none;    
    transition: all 2s ease;
  }
  & a:hover {
    color:#47cf73;
    text-decoration:underline;
  }
}
.challenge span{
  display:flex;
  align-content:center;
  position:relative;
}

.btn-social-cp {
  --dim:30px;
  position:fixed;
  bottom:var(--dim);
  right:var(--dim);
  height:var(--dim);
  width:var(--dim);
   & svg path {
    transition:all 2s ease;
    fill:#ffdd40;
  }
  &:hover svg path {
    fill:#fff;
  }
}

Frontend Forever App