[css] anas

Viewer

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing:border-box;
  5. }
  6. body {
  7.   width: 100%;
  8.   height: 100vh;
  9.   background-color:#000;
  10.   
  11.   display:grid;
  12.   place-items:center;
  13. }
  14. img {
  15.   width: 30%;
  16.   height: 100%;
  17.   object-fit:cover;
  18.   
  19.   -webkit-box-reflect:below 2px linear-gradient(transparent, transparent, #0004);
  20.   
  21.   transform-origin:center;
  22.   transform:perspective(800px) rotateY(25deg);
  23.   transition:0.5s;
  24. }
  25. .container {
  26.   max-width:600px;
  27.   max-height:350px;
  28.   
  29.   
  30.   
  31.   display:flex;
  32.   justify-content:center;
  33.   align-items:center;
  34.   gap:20px;
  35.   
  36. }
  37. .container:hover img {
  38.   opacity:0.3;
  39. }
  40. .container img:hover {
  41.   transform:perspective(800px)       rotateY(0deg);
  42.   opacity:1;
  43. }

Editor

You can edit this paste and save as new:


File Description
  • anas
  • Paste Code
  • 03 Feb-2023
  • 717 Bytes
You can Share it: