[text] PRACT

Viewer

  1. $hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
  2. $returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  3.  
  4. body {
  5.   margin: 40px 0;
  6.   font-family: "Raleway";
  7.   font-size: 14px;
  8.   font-weight: 500;
  9.   background-color: #BCAAA4;
  10.   -webkit-font-smoothing: antialiased;
  11. }
  12.  
  13. .title {
  14.   font-family: "Raleway";
  15.   font-size: 24px;
  16.   font-weight: 700;
  17.   color: #5D4037;
  18.   text-align: center;
  19. }
  20.  
  21. p {
  22.   line-height: 1.5em;
  23. }
  24.  
  25. h1+p, p+p {
  26.   margin-top: 10px;
  27. }
  28.  
  29. .container {
  30.   padding: 40px 80px;
  31.   display: flex;
  32.   flex-wrap: wrap;
  33.   justify-content: center;
  34. }
  35.  
  36. .card-wrap {
  37.   margin: 10px;
  38.   transform: perspective(800px);
  39.   transform-style: preserve-3d;
  40.   cursor: pointer;
  41.   // background-color: #fff;
  42.   
  43.   &:hover {
  44.     .card-info {
  45.       transform: translateY(0);
  46.     }
  47.     .card-info p {
  48.       opacity: 1;
  49.     }
  50.     .card-info, .card-info p {
  51.       transition: 0.6s $hoverEasing;
  52.     }
  53.     .card-info:after {
  54.       transition: 5s $hoverEasing;
  55.       opacity: 1;
  56.       transform: translateY(0);
  57.     }
  58.     .card-bg {
  59.       transition: 
  60.         0.6s $hoverEasing,
  61.         opacity 5s $hoverEasing;
  62.       opacity: 0.8;
  63.     }
  64.     .card {
  65.       transition:
  66.         0.6s $hoverEasing,
  67.         box-shadow 2s $hoverEasing;
  68.       box-shadow:
  69.         rgba(white, 0.2) 0 0 40px 5px,
  70.         rgba(white, 1) 0 0 0 1px,
  71.         rgba(black, 0.66) 0 30px 60px 0,
  72.         inset #333 0 0 0 5px,
  73.         inset white 0 0 0 6px;
  74.     }
  75.   }
  76. }
  77.  
  78. .card {
  79.   position: relative;
  80.   flex: 0 0 240px;
  81.   width: 240px;
  82.   height: 320px;
  83.   background-color: #333;
  84.   overflow: hidden;
  85.   border-radius: 10px;
  86.   box-shadow:
  87.     rgba(black, 0.66) 0 30px 60px 0,
  88.     inset #333 0 0 0 5px,
  89.     inset rgba(white, 0.5) 0 0 0 6px;
  90.   transition: 1s $returnEasing;
  91. }
  92.  
  93. .card-bg {
  94.   opacity: 0.5;
  95.   position: absolute;
  96.   top: -20px; left: -20px;
  97.   width: 100%;
  98.   height: 100%;
  99.   padding: 20px;
  100.   background-repeat: no-repeat;
  101.   background-position: center;
  102.   background-size: cover;
  103.   transition:
  104.     1s $returnEasing,
  105.     opacity 5s 1s $returnEasing;
  106.   pointer-events: none;
  107. }
  108.  
  109. .card-info {
  110.   padding: 20px;
  111.   position: absolute;
  112.   bottom: 0;
  113.   color: #fff;
  114.   transform: translateY(40%);
  115.   transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  116.   
  117.   p {
  118.     opacity: 0;
  119.     text-shadow: rgba(black, 1) 0 2px 3px;
  120.     transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  121.   }
  122.   
  123.   * {
  124.     position: relative;
  125.     z-index: 1;
  126.   }
  127.   
  128.   &:after {
  129.     content: '';
  130.     position: absolute;
  131.     top: 0; left: 0;
  132.     z-index: 0;
  133.     width: 100%;
  134.     height: 100%;
  135.     background-image: linear-gradient(to bottom, transparent 0%, rgba(#000, 0.6) 100%);
  136.     background-blend-mode: overlay;
  137.     opacity: 0;
  138.     transform: translateY(100%);
  139.     transition: 5s 1s $returnEasing;
  140.   }
  141. }
  142.  
  143. .card-info h1 {
  144.   font-family: "Playfair Display";
  145.   font-size: 36px;
  146.   font-weight: 700;
  147.   text-shadow: rgba(black, 0.5) 0 10px 10px;
  148. }

Editor

You can edit this paste and save as new:


File Description
  • PRACT
  • Paste Code
  • 09 Jun-2023
  • 2.93 Kb
You can Share it: