├── 3D Card Effect V2
    ├── img
    │   ├── 1-back.png
    │   ├── 1-shadow.png
    │   ├── 1-up.png
    │   ├── 2-back.png
    │   ├── 2-shadow.png
    │   ├── 2-up.png
    │   ├── 3-back.png
    │   ├── 3-shadow.png
    │   └── 3-up.png
    ├── index.html
    ├── script.js
    └── style.css
├── 3D Card Effect
    ├── index.html
    ├── script.js
    └── style.css
├── 3D Card Hover
    ├── img
    │   ├── 1.png
    │   ├── 2.png
    │   └── back.jpg
    ├── index.html
    └── style.css
├── 3D Card
    ├── index.html
    └── style.css
├── 3D Carousel
    ├── index.html
    ├── script.js
    └── style.css
├── 3D Image Hover
    ├── index.html
    └── style.css
├── 3D Thumb Image Hover
    ├── img
    │   └── thumb.jpg
    ├── index.html
    └── stype.css
├── Border Effect
    ├── index.html
    └── style.css
├── Button Effects(3D)
    ├── index.html
    └── style.css
├── Button Effects(Simple)
    ├── index.html
    └── style.css
├── Image Caption v1
    ├── index.html
    └── style.css
├── Image Caption v2
    ├── index.html
    └── style.css
├── Image Caption v3
    ├── index.html
    └── style.css
├── LICENSE
├── README.md
├── screenshot
    ├── 3D_Card
    │   └── screenshot.jpg
    ├── 3D_Card_Effect
    │   └── 3D_Card_Effect.jpg
    ├── 3D_Card_Effect_V2
    │   └── Screenshot.jpg
    ├── 3D_Card_Hover
    │   └── Screenshot.jpg
    ├── 3D_Carousel
    │   └── Carousel.jpg
    ├── 3D_Image_Hover
    │   └── 3DImageHover.jpg
    ├── 3D_Thumb_Image_Animation
    │   └── Screenshot.jpg
    ├── Button_Effect_Simple
    │   └── Screenshot.jpg
    ├── Image_Caption_v1
    │   └── Screenshot.jpg
    ├── Image_Caption_v2
    │   └── Screenshot.jpg
    └── Image_Caption_v3
    │   └── Screenshot.jpg
└── src
    ├── 3D Card
        ├── dark_rider-character.webp
        ├── dark_rider-cover.jpg
        ├── dark_rider-title.png
        ├── force_mage-character.webp
        ├── force_mage-cover.jpg
        └── force_mage-title.png
    └── 3D_Caoucel
        ├── 1.jpg
        ├── 2.jpg
        ├── 3.jpg
        ├── 4.jpg
        ├── 5.jpg
        ├── 6.jpg
        ├── 7.jpg
        └── 8.jpg


/3D Card Effect V2/img/1-back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/1-back.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/1-shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/1-shadow.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/1-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/1-up.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/2-back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/2-back.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/2-shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/2-shadow.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/2-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/2-up.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/3-back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/3-back.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/3-shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/3-shadow.png


--------------------------------------------------------------------------------
/3D Card Effect V2/img/3-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/3-up.png


--------------------------------------------------------------------------------
/3D Card Effect V2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>3D Card Effect v2</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="centered">
12 |       <div class="card border-left-behind">
13 |         <div class="shadow" style="--url: url('img/1-shadow.png')"></div>
14 |         <div
15 |           class="image background"
16 |           style="--url: url('img/1-back.png')"
17 |         ></div>
18 |         <div class="image cutout" style="--url: url('img/1-up.png')"></div>
19 |         <div class="content">
20 |           <h2>Hover me!</h2>
21 |           <p>Assidua praxis clavis est ad res gestas.</p>
22 |         </div>
23 |       </div>
24 |       <div class="card border-right-behind border-bottom-behind">
25 |         <div class="shadow" style="--url: url('img/2-shadow.png')"></div>
26 |         <div
27 |           class="image background"
28 |           style="--url: url('img/2-back.png')"
29 |         ></div>
30 |         <div class="image cutout" style="--url: url('img/2-up.png')"></div>
31 |         <div class="content">
32 |           <h2>Hover me!</h2>
33 |           <p>Assidua praxis clavis est ad res gestas.</p>
34 |         </div>
35 |       </div>
36 |       <div class="card border-left-behind">
37 |         <div class="shadow" style="--url: url('img/3-shadow.png')"></div>
38 |         <div
39 |           class="image background"
40 |           style="--url: url('img/3-back.png')"
41 |         ></div>
42 |         <div class="image cutout" style="--url: url('img/3-up.png')"></div>
43 |         <div class="content">
44 |           <h2>Hover me!</h2>
45 |           <p>Assidua praxis clavis est ad res gestas.</p>
46 |         </div>
47 |       </div>
48 |     </div>
49 |     <script src="script.js"></script>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/3D Card Effect V2/script.js:
--------------------------------------------------------------------------------
 1 | const angle = 20;
 2 | 
 3 | const remap = (value, oldMax, newMax) => {
 4 |   const newValue = ((value + oldMax) * (newMax * 2)) / (oldMax * 2) - newMax;
 5 |   return Math.min(Math.max(newValue, -newMax), newMax);
 6 | };
 7 | 
 8 | const lerp = (start, end, amount) => {
 9 |   return (1 - amount) * start + amount * end;
10 | };
11 | 
12 | window.addEventListener("DOMContentLoaded", (event) => {
13 |   const cards = document.querySelectorAll(".card");
14 |   cards.forEach((e) => {
15 |     e.addEventListener("mousemove", (event) => {
16 |       const rect = e.getBoundingClientRect();
17 |       const centerX = (rect.left + rect.right) / 2;
18 |       const centerY = (rect.top + rect.bottom) / 2;
19 |       const posX = event.pageX - centerX;
20 |       const posY = event.pageY - centerY;
21 |       const x = remap(posX, rect.width / 2, angle);
22 |       const y = remap(posY, rect.height / 2, angle);
23 |       e.dataset.rotateX = x;
24 |       e.dataset.rotateY = -y;
25 |     });
26 | 
27 |     e.addEventListener("mouseout", (event) => {
28 |       e.dataset.rotateX = 0;
29 |       e.dataset.rotateY = 0;
30 |     });
31 |   });
32 | 
33 |   const update = () => {
34 |     cards.forEach((e) => {
35 |       let currentX = parseFloat(
36 |         e.style.getPropertyValue("--rotateY").slice(0, -1)
37 |       );
38 |       let currentY = parseFloat(
39 |         e.style.getPropertyValue("--rotateX").slice(0, -1)
40 |       );
41 |       if (isNaN(currentX)) currentX = 0;
42 |       if (isNaN(currentY)) currentY = 0;
43 |       const x = lerp(currentX, e.dataset.rotateX, 0.05);
44 |       const y = lerp(currentY, e.dataset.rotateY, 0.05);
45 |       e.style.setProperty("--rotateY", x + "deg");
46 |       e.style.setProperty("--rotateX", y + "deg");
47 |     });
48 |   };
49 |   setInterval(update, 1000 / 60);
50 | });
51 | 


--------------------------------------------------------------------------------
/3D Card Effect V2/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap");
  2 | 
  3 | html,
  4 | body {
  5 |   width: 100%;
  6 |   height: 100%;
  7 |   font-family: "Montserrat", sans-serif;
  8 | }
  9 | 
 10 | .centered {
 11 |   display: flex;
 12 |   align-items: center;
 13 |   justify-content: center;
 14 |   gap: 3rem;
 15 |   height: 100%;
 16 | }
 17 | 
 18 | .card {
 19 |   position: relative;
 20 |   height: 28rem;
 21 |   width: 20rem;
 22 |   aspect-ratio: 5/7;
 23 |   color: #ffffff;
 24 |   perspective: 50rem;
 25 | }
 26 | 
 27 | .card::after,
 28 | .card::before {
 29 |   content: "";
 30 |   position: absolute;
 31 |   inset: 1.5rem;
 32 |   border: #e2c044 0.5rem solid;
 33 |   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
 34 |     translate3d(0, 0, 2rem);
 35 | }
 36 | 
 37 | .card::before {
 38 |   z-index: 4;
 39 | }
 40 | 
 41 | .card.border-left-behind::before {
 42 |   border-left: transparent;
 43 | }
 44 | 
 45 | .card.border-right-behind::before {
 46 |   border-right: transparent;
 47 | }
 48 | 
 49 | .card.border-bottom-behind::before {
 50 |   border-bottom: transparent;
 51 | }
 52 | 
 53 | .card .shadow {
 54 |   position: absolute;
 55 |   background: var(--url);
 56 |   background-size: cover;
 57 |   background-position: center;
 58 |   inset: 0;
 59 |   opacity: 0.8;
 60 |   filter: blur(2rem) saturate(0.9);
 61 |   box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7);
 62 |   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
 63 |     translate3d(0, 2rem, -2rem);
 64 | }
 65 | 
 66 | .card .image {
 67 |   position: absolute;
 68 |   inset: 0;
 69 |   background: linear-gradient(to top, #00000088, transparent 40%), var(--url);
 70 |   background-size: cover;
 71 |   background-position: center;
 72 |   -webkit-mask-image: var(--url);
 73 |   mask-image: var(--url);
 74 |   -webkit-mask-size: cover;
 75 |   mask-size: cover;
 76 |   -webkit-mask-position: center;
 77 |   mask-position: center;
 78 | }
 79 | 
 80 | .card .image.background {
 81 |   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
 82 |     translate3d(0, 0, 0rem);
 83 | }
 84 | 
 85 | .card .image.cutout {
 86 |   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
 87 |     translate3d(0, 0, 4rem) scale(0.92);
 88 |   z-index: 3;
 89 | }
 90 | 
 91 | .card .content {
 92 |   position: absolute;
 93 |   display: flex;
 94 |   flex-direction: column;
 95 |   justify-content: flex-end;
 96 |   padding: 3.5rem;
 97 |   transform: rotateX(var(--rotateX)) rotateY(var(--rotateY))
 98 |     translate3d(0, 0, 6rem);
 99 |   z-index: 4;
100 |   inset: 0;
101 | }
102 | 
103 | h2 {
104 |   font-size: 1.25rem;
105 |   font-weight: 700;
106 |   margin-bottom: 0.5rem;
107 |   text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
108 | }
109 | 
110 | p {
111 |   font-weight: 300;
112 |   text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
113 | }
114 | 


--------------------------------------------------------------------------------
/3D Card Effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>3D Card effect</title>
 5 |     <link rel="stylesheet" href="style.css" />
 6 |   </head>
 7 |   <body>
 8 |     <div class="container">
 9 |       <div class="card">
10 |         <div class="gradient">
11 |           <img
12 |             src="https://raw.githubusercontent.com/developedbyed/3d-card-effect/master/adidas.png"
13 |             alt=""
14 |           />
15 |         </div>
16 |         <h1 class="heading">Adidas ZX</h1>
17 |         <p class="para">
18 |           FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION COMFORT.
19 |         </p>
20 |         <div class="btn-container">
21 |           <button>39</button>
22 |           <button>40</button>
23 |           <button class="active">42</button>
24 |           <button>44</button>
25 |         </div>
26 |         <button class="purchase-btn">Purchase</button>
27 |       </div>
28 |     </div>
29 |   </body>
30 |   <script src="./script.js"></script>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/3D Card Effect/script.js:
--------------------------------------------------------------------------------
 1 | const container = document.querySelector(".container");
 2 | const card = document.querySelector(".card");
 3 | const heading = document.querySelector(".heading");
 4 | const purchaseBtn = document.querySelector(".purchase-btn");
 5 | 
 6 | container.addEventListener("mousemove", (e) => {
 7 |   let X = (window.innerWidth / 2 - e.pageX) / 30;
 8 |   let Y = (window.innerHeight / 2 - e.pageY) / 30;
 9 | 
10 |   card.style.transition = "none";
11 |   card.style.transform = `rotateX(${X}deg) rotateY(${Y}deg)`;
12 | });
13 | 
14 | container.addEventListener("mouseenter", (e) => {
15 |   heading.style.transform = `translateZ(45px)`;
16 |   purchaseBtn.style.transform = `translateZ(75px)`;
17 | });
18 | 
19 | container.addEventListener("mouseleave", (e) => {
20 |   card.style.transition = "transform 0.75s";
21 |   card.style.transform = "none";
22 |   heading.style.transform = "none";
23 |   purchaseBtn.style.transform = "none";
24 | });
25 | 


--------------------------------------------------------------------------------
/3D Card Effect/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
  2 | 
  3 | * {
  4 |   font-family: "Poppins", "sans-serif";
  5 |   padding: 0;
  6 |   margin: 0;
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | body {
 11 |   display: flex;
 12 |   align-items: center;
 13 |   justify-content: center;
 14 |   min-height: 100vh;
 15 |   background: #f4f4f4;
 16 |   perspective: 1000px;
 17 | }
 18 | 
 19 | .container {
 20 |   width: 50%;
 21 |   display: flex;
 22 |   align-items: center;
 23 |   justify-content: center;
 24 | }
 25 | 
 26 | .card {
 27 |   transform-style: preserve-3d;
 28 |   background: linear-gradient(
 29 |     to left,
 30 |     rgba(245, 70, 66, 0.75),
 31 |     rgba(8, 83, 156, 0.75)
 32 |   );
 33 |   margin: 5rem;
 34 |   width: 600px;
 35 |   padding: 2rem 5rem;
 36 |   display: flex;
 37 |   flex-direction: column;
 38 |   border-radius: 30px;
 39 |   box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2), 0 0 50px 0 rgba(0, 0, 0, 0.19);
 40 | }
 41 | 
 42 | .gradient {
 43 |   border-radius: 50%;
 44 |   background: linear-gradient(
 45 |     to right,
 46 |     rgba(245, 70, 66, 0.75),
 47 |     rgba(8, 83, 156, 0.75)
 48 |   );
 49 |   height: 250px;
 50 |   width: 250px;
 51 |   margin: 0 auto;
 52 | }
 53 | 
 54 | img {
 55 |   width: 350px;
 56 |   position: relative;
 57 |   top: 20px;
 58 |   left: -20px;
 59 |   transition: all 0.75s;
 60 | }
 61 | 
 62 | h1 {
 63 |   font-size: 3rem;
 64 |   margin-top: 2rem;
 65 |   transition: all 0.75s;
 66 | }
 67 | 
 68 | p {
 69 |   font-size: 1.3rem;
 70 |   margin-top: 1.5rem;
 71 |   line-height: 2rem;
 72 |   color: #555;
 73 |   font-weight: bold;
 74 |   transition: all 0.75s;
 75 | }
 76 | 
 77 | .btn-container {
 78 |   display: flex;
 79 |   justify-content: space-between;
 80 |   align-items: center;
 81 |   margin-top: 1.5rem;
 82 |   transition: all 0.75s;
 83 | }
 84 | 
 85 | .btn-container button {
 86 |   border: 0;
 87 |   border-radius: 50px;
 88 |   font-size: 1rem;
 89 |   box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
 90 |   color: black;
 91 |   padding: 3px 1.7rem;
 92 |   cursor: pointer;
 93 | }
 94 | 
 95 | .btn-container button:hover {
 96 |   background-color: #555;
 97 |   color: #fff;
 98 | }
 99 | 
100 | .btn-container button.active {
101 |   background-color: #555;
102 |   color: #fff;
103 | }
104 | 
105 | .purchase-btn {
106 |   border: 0;
107 |   border-radius: 30px;
108 |   margin-top: 3.5rem;
109 |   color: #fff;
110 |   background-color: #f54642;
111 |   padding: 12px;
112 |   transition: all 0.75s;
113 |   cursor: pointer;
114 | }
115 | 


--------------------------------------------------------------------------------
/3D Card Hover/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Hover/img/1.png


--------------------------------------------------------------------------------
/3D Card Hover/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Hover/img/2.png


--------------------------------------------------------------------------------
/3D Card Hover/img/back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Hover/img/back.jpg


--------------------------------------------------------------------------------
/3D Card Hover/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>3D Card Hover</title>
 6 |     <link rel="stylesheet" href="style.css" />
 7 |   </head>
 8 |   <body>
 9 |     <figure>
10 |       <img src="img/2.png" alt="Necromancer" />
11 |       <figcaption>The Necro</figcaption>
12 |     </figure>
13 |     <figure>
14 |       <img src="img/1.png" alt="Druid" />
15 |       <figcaption>The Druid</figcaption>
16 |     </figure>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/3D Card Hover/style.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "Exoct";
 3 |   src: url("https://assets.codepen.io/1480814/films.EXH_____.ttf");
 4 | }
 5 | 
 6 | body {
 7 |   margin: 0;
 8 |   min-height: 100vh;
 9 |   display: grid;
10 |   grid-auto-flow: column;
11 |   grid-auto-columns: min(230px, 35vmin);
12 |   place-content: end center;
13 |   gap: 50px;
14 |   background: linear-gradient(#0000, rgb(50 50 50 / 88%)),
15 |     url("img/back.jpg") top/cover;
16 | }
17 | 
18 | figure {
19 |   width: 100%;
20 |   aspect-ratio: 1;
21 |   margin: 0 0 60px;
22 |   padding: 5px 20px 0;
23 |   box-sizing: border-box;
24 |   display: grid;
25 |   grid-template-rows: 100%;
26 |   cursor: pointer;
27 |   position: relative;
28 |   filter: drop-shadow(0 0 20px rgb(0 0 0/50%));
29 | }
30 | 
31 | figure:before {
32 |   content: "";
33 |   position: absolute;
34 |   z-index: -1;
35 |   inset: 0;
36 |   background: top/cover;
37 |   transform-origin: bottom;
38 |   filter: brightness(0.9);
39 |   transition: 0.5s;
40 | }
41 | 
42 | figure:before {
43 |   background-image: url(https://assets.codepen.io/1480814/necro-back.jpg);
44 | }
45 | 
46 | figure + figure:before {
47 |   background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg);
48 | }
49 | 
50 | figure:hover::before {
51 |   filter: brightness(0.3);
52 |   transform: perspective(500px) rotateX(60deg);
53 | }
54 | 
55 | figcaption {
56 |   grid-area: 1/1;
57 |   width: calc(100% + 40px);
58 |   font-family: Exoct;
59 |   color: white;
60 |   font-size: min(32px, 5vmin);
61 |   text-align: center;
62 |   place-self: end center;
63 |   transform: perspective(500px) translateY(100%) rotateX(-90deg);
64 |   backface-visibility: hidden;
65 |   transform-origin: top;
66 |   background: #000;
67 |   transition: 0.5s;
68 | }
69 | 
70 | figure:hover figcaption {
71 |   transform: perspective(500px) translateY(100%) rotateX(-30deg);
72 | }
73 | 
74 | img {
75 |   grid-area: 1/1;
76 |   width: 100%;
77 |   height: 100%;
78 |   object-fit: cover;
79 |   object-position: top;
80 |   filter: contrast(0.8) brightness(0.7);
81 |   place-self: end center;
82 |   transition: 0.5s;
83 | }
84 | 
85 | figure:hover img {
86 |   width: 130%;
87 |   height: 255%;
88 |   filter: contrast(1);
89 | }
90 | 


--------------------------------------------------------------------------------
/3D Card/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>SecretariatV-3D card</title>
 6 |     <link rel="stylesheet" href="./style.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="#">
10 |       <div class="card">
11 |         <div class="wrapper">
12 |           <img
13 |             src="../src/3D Card/dark_rider-cover.jpg"
14 |             alt="cover-image"
15 |             class="cover-image"
16 |           />
17 |         </div>
18 |         <img
19 |           src="../src/3D Card/dark_rider-title.png"
20 |           alt="title"
21 |           class="title"
22 |         />
23 |         <img
24 |           src="../src/3D Card/dark_rider-character.webp"
25 |           alt="character"
26 |           class="character"
27 |         />
28 |       </div>
29 |     </a>
30 |     <a href="#">
31 |       <div class="card">
32 |         <div class="wrapper">
33 |           <img
34 |             src="../src/3D Card/force_mage-cover.jpg"
35 |             alt="cover-image"
36 |             class="cover-image"
37 |           />
38 |         </div>
39 |         <img
40 |           src="../src/3D Card/force_mage-title.png"
41 |           alt="title"
42 |           class="title"
43 |         />
44 |         <img
45 |           src="../src/3D Card/force_mage-character.webp"
46 |           alt="character"
47 |           class="character"
48 |         />
49 |       </div>
50 |     </a>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/3D Card/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --card-height: 300px;
  3 |   --card-width: calc(var(--card-height) / 1.5);
  4 |   --bg-color: #191c29;
  5 | }
  6 | * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | body {
 11 |   width: 100vw;
 12 |   height: 100vh;
 13 |   margin: 0;
 14 |   display: flex;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 |   background: var(--bg-color);
 18 | }
 19 | 
 20 | .card {
 21 |   width: var(--card-width);
 22 |   height: var(--card-height);
 23 |   display: flex;
 24 |   justify-content: center;
 25 |   align-items: flex-end;
 26 |   padding: 0 36px;
 27 |   margin: 0 50px;
 28 |   perspective: 2500px;
 29 | }
 30 | 
 31 | .cover-image {
 32 |   width: 100%;
 33 |   height: 100%;
 34 |   object-fit: cover;
 35 | }
 36 | 
 37 | .wrapper {
 38 |   transition: all 0.5s;
 39 |   position: absolute;
 40 |   width: 100%;
 41 |   z-index: -1;
 42 | }
 43 | 
 44 | .card:hover .wrapper {
 45 |   transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
 46 |   box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 47 |   -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 48 |   -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 49 | }
 50 | 
 51 | .wrapper::before,
 52 | .wrapper::after {
 53 |   content: "";
 54 |   opacity: 0;
 55 |   width: 100%;
 56 |   height: 80px;
 57 |   transition: all 0.5s;
 58 |   position: absolute;
 59 |   left: 0;
 60 | }
 61 | 
 62 | .wrapper::before {
 63 |   top: 0;
 64 |   height: 100%;
 65 |   background-image: linear-gradient(
 66 |     to top,
 67 |     transparent 46%,
 68 |     rgba(12, 13, 19, 0.5) 68%,
 69 |     rgba(12, 13, 19) 97%
 70 |   );
 71 | }
 72 | 
 73 | .wrapper::after {
 74 |   bottom: 0;
 75 |   opacity: 1;
 76 |   background-image: linear-gradient(
 77 |     to bottom,
 78 |     transparent 46%,
 79 |     rgba(12, 13, 19, 0.5) 68%,
 80 |     rgba(12, 13, 19) 97%
 81 |   );
 82 | }
 83 | 
 84 | .card:hover .wrapper::before {
 85 |   opacity: 1;
 86 | }
 87 | 
 88 | .card:hover .wrapper::after {
 89 |   height: 120px;
 90 | }
 91 | 
 92 | .title {
 93 |   width: 100%;
 94 |   transition: transform 0.5s;
 95 | }
 96 | 
 97 | .card:hover .title {
 98 |   transform: translate3d(0%, -50px, 100px);
 99 | }
100 | 
101 | .character {
102 |   width: 100%;
103 |   opacity: 0;
104 |   position: absolute;
105 |   transition: 0.5s;
106 |   z-index: -1;
107 | }
108 | 
109 | .card:hover .character {
110 |   opacity: 1;
111 |   transform: translate3d(0%, -30%, 100px);
112 | }
113 | 


--------------------------------------------------------------------------------
/3D Carousel/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>SecretariatV-3D carousel</title>
 5 |     <link rel="stylesheet" href="./style.css" />
 6 |   </head>
 7 |   <div id="wheel-container">
 8 |     <div id="img-container">
 9 |       <img src="../src/3D_Caoucel/1.jpg" />
10 |       <img src="../src/3D_Caoucel/2.jpg" />
11 |       <img src="../src/3D_Caoucel/3.jpg" />
12 |       <img src="../src/3D_Caoucel/4.jpg" />
13 |       <img src="../src/3D_Caoucel/5.jpg" />
14 |       <img src="../src/3D_Caoucel/6.jpg" />
15 |       <img src="../src/3D_Caoucel/7.jpg" />
16 |       <img src="../src/3D_Caoucel/8.jpg" />
17 |       <p>3D Carousel</p>
18 |     </div>
19 |     <div id="ground"></div>
20 |   </div>
21 |   <body>
22 |     <script src="./script.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/3D Carousel/script.js:
--------------------------------------------------------------------------------
 1 | var radius = 240;
 2 | var imgWidth = 120;
 3 | var imgHeight = 170;
 4 | var autoRotate = true;
 5 | var rotateSpeed = -60;
 6 | 
 7 | setTimeout(init, 10);
 8 | 
 9 | var wheel = document.getElementById("wheel-container");
10 | var img_container = document.getElementById("img-container");
11 | var imgs = img_container.getElementsByTagName("img");
12 | 
13 | img_container.style.width = imgWidth + "px";
14 | img_container.style.height = imgHeight + "px";
15 | 
16 | function init(delayTime) {
17 |   for (var i = 0; i < imgs.length; i++) {
18 |     imgs[i].style.transform =
19 |       "rotateY(" +
20 |       i * (360 / imgs.length) +
21 |       "deg) translateZ(" +
22 |       radius +
23 |       "px)";
24 |     imgs[i].style.transition = "transform 1s";
25 |     imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + "s";
26 |   }
27 | }
28 | 
29 | function applyTransform(obj) {
30 |   if (tY > 180) tY = 180;
31 |   if (tY < 0) tY = 0;
32 | 
33 |   obj.style.transform = "rotateX(" + -tY + "deg) rotateY(" + tX + "deg)";
34 | }
35 | 
36 | function playSpin(flag) {
37 |   img_container.style.animationPlayState = flag ? "running" : "paused";
38 | }
39 | 
40 | if (autoRotate) {
41 |   console.log(autoRotate);
42 |   var animation = rotateSpeed > 0 ? "spin" : "spinRevert";
43 |   img_container.style.animation = `${animation} ${Math.abs(
44 |     rotateSpeed
45 |   )}s infinite linear`;
46 | }
47 | 
48 | var desX = 0,
49 |   desY = 0,
50 |   tX = 0,
51 |   tY = 10;
52 | 
53 | document.onpointerdown = function (e) {
54 |   clearInterval(wheel.timer);
55 |   e = e || window.event;
56 |   var sX = e.clientX,
57 |     sY = e.clientY;
58 | 
59 |   this.onpointermove = function (e) {
60 |     e = e || window.event;
61 |     var nX = e.clientX,
62 |       nY = e.clientY;
63 |     desX = nX - sX;
64 |     desY = nY - sY;
65 |     tX += desX * 0.1;
66 |     tY += desY * 0.1;
67 |     applyTransform(wheel);
68 |     sX = nX;
69 |     sY = nY;
70 |   };
71 | 
72 |   this.onpointerup = function (e) {
73 |     wheel.timer = setInterval(function () {
74 |       desX *= 0.95;
75 |       desY *= 0.95;
76 |       tX += desX * 0.1;
77 |       tY += desY * 0.1;
78 |       applyTransform(wheel);
79 |       playSpin(false);
80 |       if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
81 |         clearInterval(wheel.timer);
82 |         playSpin(true);
83 |       }
84 |     }, 17);
85 |     this.onpointermove = this.onpointerup = null;
86 |   };
87 | 
88 |   return false;
89 | };
90 | 
91 | document.onmousewheel = function (e) {
92 |   e = e || window.event;
93 |   var d = e.wheelDelta / 20 || -e.detail;
94 |   radius += d;
95 |   init(1);
96 | };
97 | 


--------------------------------------------------------------------------------
/3D Carousel/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --bg-color: #111;
 3 | }
 4 | 
 5 | html,
 6 | body {
 7 |   height: 100%;
 8 | }
 9 | 
10 | body {
11 |   background-color: var(--bg-color);
12 |   overflow: hidden;
13 |   perspective: 1000px;
14 |   transform-style: preserve-3d;
15 |   display: flex;
16 | }
17 | 
18 | #wheel-container,
19 | #img-container {
20 |   position: relative;
21 |   margin: auto;
22 |   transform-style: preserve-3d;
23 |   transform: rotateX(-10deg);
24 |   display: flex;
25 | }
26 | 
27 | img {
28 |   transform-style: preserve-3d;
29 |   position: absolute;
30 |   left: 0;
31 |   top: 0;
32 |   width: 100%;
33 |   height: 100%;
34 |   line-height: 200px;
35 |   font-size: 50px;
36 |   text-align: center;
37 |   box-shadow: 0 0 8px #fff;
38 |   -webkit-box-reflect: below 10px
39 |     linear-gradient(transparent, transparent, #0005);
40 | }
41 | 
42 | img:hover {
43 |   box-shadow: 0 0 15px #fffd;
44 |   -webkit-box-reflect: below 10px
45 |     linear-gradient(transparent, transparent, #0007);
46 | }
47 | 
48 | p {
49 |   font-family: serif;
50 |   color: white;
51 |   top: 100%;
52 |   left: 50%;
53 |   position: absolute;
54 |   transform: translate(-50%, -50%) rotateX(90deg);
55 | }
56 | 
57 | #ground {
58 |   height: 900px;
59 |   width: 900px;
60 |   top: 100%;
61 |   left: 50%;
62 |   position: absolute;
63 |   transform: translate(-50%, -50%) rotateX(90deg);
64 |   background: -webkit-radial-gradient(
65 |     center center,
66 |     farthest-side,
67 |     #9993,
68 |     transparent
69 |   );
70 | }
71 | 
72 | @keyframes spin {
73 |   from {
74 |     transform: rotateY(0deg);
75 |   }
76 |   to {
77 |     transform: rotateY(360deg);
78 |   }
79 | }
80 | 
81 | @keyframes spinRevert {
82 |   from {
83 |     transform: rotateY(360deg);
84 |   }
85 |   to {
86 |     transform: rotateY(0deg);
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/3D Image Hover/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>3D Image Hover</title>
 5 |     <link rel="stylesheet" href="style.css" />
 6 |   </head>
 7 |   <body>
 8 |     <div class="container">
 9 |       <img
10 |         src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png"
11 |       />
12 |       <img
13 |         src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png"
14 |       />
15 |       <img
16 |         src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png"
17 |       />
18 |       <img
19 |         src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png"
20 |       />
21 |     </div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/3D Image Hover/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   width: 100%;
 5 |   height: 100vh;
 6 |   display: flex;
 7 |   align-items: center;
 8 |   justify-content: center;
 9 | }
10 | 
11 | .container {
12 |   position: relative;
13 |   width: 360px;
14 |   height: 640px;
15 |   margin-top: 150px;
16 |   background: rgba(0, 0, 0, 0);
17 |   transform: rotate(-30deg) skew(25deg) scale(0.8);
18 |   transition: 0.5s;
19 | }
20 | 
21 | img {
22 |   position: absolute;
23 |   width: 100%;
24 |   transition: 0.5s;
25 | }
26 | 
27 | .container:hover img:nth-child(4) {
28 |   transform: translate(160px, -160px);
29 |   opacity: 1;
30 | }
31 | 
32 | .container:hover img:nth-child(3) {
33 |   transform: translate(120px, -120px);
34 |   opacity: 0.8;
35 | }
36 | 
37 | .container:hover img:nth-child(2) {
38 |   transform: translate(80px, -80px);
39 |   opacity: 0.6;
40 | }
41 | 
42 | .container:hover img:nth-child(1) {
43 |   transform: translate(40px, -40px);
44 |   opacity: 0.4;
45 | }
46 | 


--------------------------------------------------------------------------------
/3D Thumb Image Hover/img/thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Thumb Image Hover/img/thumb.jpg


--------------------------------------------------------------------------------
/3D Thumb Image Hover/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>3D Thumb Image</title>
 7 |     <link rel="stylesheet" href="stype.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="thumb">
11 |       <a href="#">
12 |         <span>hte optimist lives on</span>
13 |       </a>
14 |     </div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/3D Thumb Image Hover/stype.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans);
 2 | 
 3 | body {
 4 |   background: #ddd;
 5 |   font-family: "Open Sans", sans-serif;
 6 |   height: 100vh;
 7 |   margin: 0;
 8 | }
 9 | 
10 | .thumb {
11 |   width: 400px;
12 |   height: 300px;
13 |   margin: 70px auto;
14 |   perspective: 1000px;
15 | }
16 | 
17 | .thumb a {
18 |   display: block;
19 |   width: 100%;
20 |   height: 100%;
21 |   background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
22 |     url("img/thumb.jpg");
23 |   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))
24 |     url("img/thumb.jpg");
25 |   background-size: 0, cover;
26 |   transform-style: preserve-3d;
27 |   transition: all 0.5s;
28 | }
29 | 
30 | .thumb:hover a {
31 |   transform: rotateX(80deg);
32 |   transform-origin: bottom;
33 | }
34 | 
35 | .thumb a:after {
36 |   content: "";
37 |   position: absolute;
38 |   left: 0;
39 |   bottom: 0;
40 |   width: 100%;
41 |   height: 36px;
42 |   background: inherit;
43 |   background-size: cover, cover;
44 |   background-position: bottom;
45 |   transform: rotateX(90deg);
46 |   transform-origin: bottom;
47 | }
48 | 
49 | .thumb a:before {
50 |   content: "";
51 |   position: absolute;
52 |   top: 0;
53 |   left: 0;
54 |   width: 100%;
55 |   height: 100%;
56 |   background: rgba(0, 0, 0, 0.5);
57 |   box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
58 |   transition: all 0.5s;
59 |   opacity: 0.15;
60 |   transform: rotateX(95deg) translateZ(-80px) scale(0.75);
61 |   transform-origin: bottom;
62 | }
63 | 
64 | .thumb:hover a:before {
65 |   opacity: 1;
66 |   box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
67 |   transform: rotateX(0) translateZ(-60px) scale(0.85);
68 | }
69 | 
70 | .thumb a span {
71 |   color: white;
72 |   text-transform: uppercase;
73 |   text-align: center;
74 |   position: absolute;
75 |   top: 100%;
76 |   left: 0;
77 |   width: 100%;
78 |   transform: rotateX(-89.99deg);
79 |   transform-origin: top;
80 |   font: bold 12px/36px "Open Sans";
81 |   z-index: 1;
82 | }
83 | 


--------------------------------------------------------------------------------
/Border Effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Border Effect</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="box">
13 |         <div class="spin-container">
14 |           <div class="shape">
15 |             <div class="bd"></div>
16 |           </div>
17 |         </div>
18 |       </div>
19 |     </div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Border Effect/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | html {
  6 |   font-family: sans-serif;
  7 |   line-height: 1.15;
  8 | }
  9 | 
 10 | body {
 11 |   background: #003;
 12 |   margin: 0;
 13 | }
 14 | 
 15 | .container {
 16 |   height: 100vh;
 17 |   display: flex;
 18 |   align-items: center;
 19 |   justify-content: center;
 20 |   overflow: hidden;
 21 | }
 22 | 
 23 | .box {
 24 |   width: 60vmin;
 25 |   height: 60vmin;
 26 |   border: 1px dashed rgba(255, 255, 255, 0.4);
 27 |   position: relative;
 28 | }
 29 | 
 30 | .box::before {
 31 |   content: "";
 32 |   position: absolute;
 33 |   top: 0;
 34 |   left: 0;
 35 |   bottom: 0;
 36 |   right: 0;
 37 |   border-radius: 50%;
 38 |   border: 1px dashed rgba(255, 255, 255, 0.4);
 39 |   transform: scale(1.42);
 40 | }
 41 | 
 42 | .spin-container {
 43 |   width: 100%;
 44 |   height: 100%;
 45 |   -webkit-animation: spin 12s linear infinite;
 46 |   animation: spin 12s linear infinite;
 47 |   position: relative;
 48 | }
 49 | 
 50 | .shape {
 51 |   width: 100%;
 52 |   height: 100%;
 53 |   transition: border-radius 1s ease-out;
 54 |   -webkit-animation: morph 8s ease-in-out infinite both alternate;
 55 |   animation: morph 8s ease-in-out infinite both alternate;
 56 |   border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
 57 |   position: absolute;
 58 |   overflow: hidden;
 59 |   z-index: 5;
 60 | }
 61 | 
 62 | .bd {
 63 |   width: 120%;
 64 |   height: 120%;
 65 |   position: absolute;
 66 |   left: -10%;
 67 |   top: -10%;
 68 |   background: url("img/1.jpg");
 69 |   background-size: 100%;
 70 |   background-position: center -9%;
 71 |   display: flex;
 72 |   align-items: center;
 73 |   justify-content: center;
 74 |   animation: spin 12s linear infinite reverse;
 75 |   z-index: 2;
 76 | }
 77 | 
 78 | @-webkit-keyframes morph {
 79 |   0% {
 80 |     border-radius: 40% 60% 60% 40%/60% 30% 70% 40%;
 81 |   }
 82 |   100% {
 83 |     border-radius: 40% 60%;
 84 |   }
 85 | }
 86 | 
 87 | @keyframes morph {
 88 |   0% {
 89 |     border-radius: 40% 60% 60% 40%/60% 30% 70% 40%;
 90 |   }
 91 |   100% {
 92 |     border-radius: 40% 60%;
 93 |   }
 94 | }
 95 | 
 96 | @-webkit-keyframes spin {
 97 |   to {
 98 |     transform: rotate(1turn);
 99 |   }
100 | }
101 | 
102 | @keyframes spin {
103 |   to {
104 |     transform: rotate(1turn);
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/Button Effects(3D)/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Button Effect 3D</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="glow">
13 |         <button class="glowing-btn">
14 |           <spa class="glowing-txt"
15 |             >C<span class="faulty-letter">L</span>ICK</spa
16 |           >
17 |         </button>
18 |       </div>
19 |     </div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Button Effects(3D)/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=Raleway");
  2 | 
  3 | :root {
  4 |   --glow-color: hsl(186 100% 69%);
  5 | }
  6 | 
  7 | *,
  8 | *::before,
  9 | *::after {
 10 |   box-sizing: border-box;
 11 | }
 12 | 
 13 | html,
 14 | body {
 15 |   height: 100%;
 16 |   width: 100%;
 17 |   overflow: hidden;
 18 |   margin: 0;
 19 | }
 20 | 
 21 | .container {
 22 |   height: 100%;
 23 |   width: 100%;
 24 |   display: grid;
 25 |   grid-template-columns: repeat(3, 1fr);
 26 |   grid-template-rows: repeat(3, 1fr);
 27 | }
 28 | 
 29 | .glow {
 30 |   background: black;
 31 |   display: flex;
 32 |   justify-content: center;
 33 |   align-items: center;
 34 | }
 35 | 
 36 | .glowing-btn {
 37 |   position: relative;
 38 |   color: var(--glow-color);
 39 |   cursor: pointer;
 40 |   padding: 0.15em 0.5em;
 41 |   border: 0.1em solid var(--glow-color);
 42 |   border-radius: 0.45em;
 43 |   background: none;
 44 |   font-family: "Raleway", sans-serif;
 45 |   font-size: 1em;
 46 |   font-weight: 700;
 47 |   letter-spacing: 0.5em;
 48 |   perspective: 2em;
 49 | 
 50 |   -webkit-box-shadow: inset 0 0 0.2em 0 var(--glow-color),
 51 |     0 0 0.2em 0 var(--glow-color);
 52 |   box-shadow: inset 0 0 0.2em 0 var(--glow-color), 0 0 0.2em 0 var(--glow-color);
 53 |   animation: border-flicker 2s linear infinite;
 54 | }
 55 | 
 56 | .glowing-btn::before {
 57 |   content: "";
 58 |   position: absolute;
 59 |   top: 0;
 60 |   bottom: 0;
 61 |   left: 0;
 62 |   right: 0;
 63 |   filter: blur(1em);
 64 |   background: var(--glow-color);
 65 |   transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
 66 |   pointer-events: none;
 67 | }
 68 | 
 69 | .glowing-btn::after {
 70 |   content: "";
 71 |   position: absolute;
 72 |   top: 0;
 73 |   left: 0;
 74 |   right: 0;
 75 |   bottom: 0;
 76 |   opacity: 0;
 77 |   z-index: -1;
 78 |   border-radius: 0.45em;
 79 |   background: var(--glow-color);
 80 |   box-shadow: 0 0 2em 0.2em var(--glow-color);
 81 |   transition: opacity 100ms linear;
 82 | }
 83 | 
 84 | .glowing-txt {
 85 |   float: left;
 86 |   margin-right: -0.2em;
 87 |   text-shadow: 0 0 0.125em hsl(0, 0%, 100% / 0.3), 0 0 0.45em var(--glow-color);
 88 |   animation: text-flicker 3s linear infinite;
 89 | }
 90 | 
 91 | .faulty-letter {
 92 |   opacity: 0.5;
 93 |   animation: faulty-flicker 2s linear infinite;
 94 | }
 95 | 
 96 | .glowing-btn:hover {
 97 |   color: rgba(0, 0, 0, 0.8);
 98 |   text-shadow: none;
 99 |   animation: none;
100 | }
101 | 
102 | .glowing-btn:hover .glowing-txt {
103 |   animation: none;
104 | }
105 | 
106 | .glowing-btn:hover .faulty-letter {
107 |   animation: none;
108 |   text-shadow: none;
109 |   opacity: 1;
110 | }
111 | 
112 | .glowing-btn:hover:before {
113 |   filter: blur(1.5em);
114 |   opacity: 1;
115 | }
116 | 
117 | .glowing-btn:hover:after {
118 |   opacity: 1;
119 | }
120 | 
121 | @keyframes border-flicker {
122 |   0% {
123 |     opacity: 0.1;
124 |   }
125 |   2% {
126 |     opacity: 1;
127 |   }
128 |   3% {
129 |     opacity: 0.1;
130 |   }
131 |   8% {
132 |     opacity: 1;
133 |   }
134 |   70% {
135 |     opacity: 0.7;
136 |   }
137 |   100% {
138 |     opacity: 1;
139 |   }
140 | }
141 | 
142 | @keyframes text-flicker {
143 |   0% {
144 |     opacity: 0.1;
145 |   }
146 |   2% {
147 |     opacity: 1;
148 |   }
149 |   8% {
150 |     opacity: 0.1;
151 |   }
152 |   9% {
153 |     opacity: 1;
154 |   }
155 |   12% {
156 |     opacity: 0.1;
157 |   }
158 |   20% {
159 |     opacity: 1;
160 |   }
161 |   25% {
162 |     opacity: 0.3;
163 |   }
164 |   30% {
165 |     opacity: 1;
166 |   }
167 |   70% {
168 |     opacity: 0.7;
169 |   }
170 |   72% {
171 |     opacity: 0.2;
172 |   }
173 |   77% {
174 |     opacity: 0.9;
175 |   }
176 |   100% {
177 |     opacity: 0.9;
178 |   }
179 | }
180 | 
181 | @keyframes faulty-flicker {
182 |   0% {
183 |     opacity: 0.1;
184 |   }
185 |   2% {
186 |     opacity: 0.1;
187 |   }
188 |   4% {
189 |     opacity: 0.5;
190 |   }
191 |   19% {
192 |     opacity: 0.5;
193 |   }
194 |   21% {
195 |     opacity: 0.1;
196 |   }
197 |   23% {
198 |     opacity: 1;
199 |   }
200 |   80% {
201 |     opacity: 0.5;
202 |   }
203 |   83% {
204 |     opacity: 0.4;
205 |   }
206 | 
207 |   87% {
208 |     opacity: 1;
209 |   }
210 | }
211 | 


--------------------------------------------------------------------------------
/Button Effects(Simple)/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Button Effects (Simple Animation)</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div class="btn-one">
13 |         <div class="center">
14 |           <div class="btn">
15 |             <svg
16 |               class="border"
17 |               width="180px"
18 |               height="60px"
19 |               viewBox="0 0 180 60"
20 |             >
21 |               <polyline class="bg-line" points="179,1 179,59 1,59 1,1 179,1" />
22 |               <polyline class="hi-line" points="179,1 179,59 1,59 1,1 179,1" />
23 |             </svg>
24 |             <span>HOVER ME</span>
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Button Effects(Simple)/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
 2 | 
 3 | body,
 4 | html {
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   background: #5ca4ea;
10 |   overflow: hidden;
11 |   font-family: "Lato", sans-serif;
12 | }
13 | 
14 | .container {
15 |   display: grid;
16 |   grid-template-columns: repeat(5, 1fr);
17 |   grid-template-rows: repeat(4, 1fr);
18 |   gap: 12px;
19 | }
20 | 
21 | .btn-one {
22 |   height: 100px;
23 |   width: 200px;
24 |   position: absolute;
25 |   display: flex;
26 |   align-items: center;
27 |   justify-content: center;
28 | }
29 | 
30 | .btn-one .center {
31 |   width: 180px;
32 |   height: 60px;
33 |   position: absolute;
34 | }
35 | 
36 | .btn-one .center .btn {
37 |   width: 180px;
38 |   height: 60px;
39 |   cursor: pointer;
40 |   background: transparent;
41 |   border: 1px solid #91c9ff;
42 |   outline: none;
43 |   transition: 1s ease-in-out;
44 |   display: flex;
45 |   align-items: center;
46 |   justify-content: center;
47 | }
48 | 
49 | svg {
50 |   position: absolute;
51 |   left: 0;
52 |   top: 0;
53 |   fill: none;
54 |   stroke: #fff;
55 |   stroke-dasharray: 150 480;
56 |   stroke-dashoffset: 150;
57 |   transition: 1s ease-in-out;
58 | }
59 | 
60 | .btn-one .btn:hover {
61 |   transition: 1s ease-in-out;
62 |   background: #4f95da;
63 | }
64 | 
65 | .btn-one .btn:hover svg {
66 |   stroke-dashoffset: -480;
67 | }
68 | 
69 | .btn-one .btn span {
70 |   color: white;
71 |   font-size: 18px;
72 |   font-weight: 100;
73 | }
74 | 


--------------------------------------------------------------------------------
/Image Caption v1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Image Caption V1</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <figure class="caption">
12 |       <img
13 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg"
14 |         alt="sample74"
15 |       />
16 |       <figcaption>
17 |         <h2>Jason Response</h2>
18 |         <p>Just makes people try to do everything at onece.</p>
19 |       </figcaption>
20 |       <a href="#"></a>
21 |     </figure>
22 |     <figure class="caption">
23 |       <img
24 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg"
25 |         alt="sample74"
26 |       />
27 |       <figcaption>
28 |         <h2>Jason Response</h2>
29 |         <p>Just makes people try to do everything at onece.</p>
30 |       </figcaption>
31 |       <a href="#"></a>
32 |     </figure>
33 |     <figure class="caption">
34 |       <img
35 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample13.jpg"
36 |         alt="sample74"
37 |       />
38 |       <figcaption>
39 |         <h2>Jason Response</h2>
40 |         <p>Just makes people try to do everything at onece.</p>
41 |       </figcaption>
42 |       <a href="#"></a>
43 |     </figure>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Image Caption v1/style.css:
--------------------------------------------------------------------------------
  1 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
  2 | 
  3 | html {
  4 |   height: 100%;
  5 | }
  6 | 
  7 | body {
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: center;
 11 |   flex-flow: wrap;
 12 |   margin: 0;
 13 |   background-color: #212121;
 14 |   height: 100%;
 15 | }
 16 | 
 17 | figure.caption {
 18 |   position: relative;
 19 |   font-family: "Raleway", Arial, sans-serif;
 20 |   color: #fff;
 21 |   overflow: hidden;
 22 |   margin: 10px;
 23 |   min-width: 220px;
 24 |   max-width: 310px;
 25 |   max-height: 220px;
 26 |   width: 100%;
 27 |   color: black;
 28 |   text-align: center;
 29 | }
 30 | 
 31 | figure.caption * {
 32 |   box-sizing: border-box;
 33 |   transition: all 0.6s ease;
 34 | }
 35 | 
 36 | figure.caption img {
 37 |   opacity: 1;
 38 |   width: 100%;
 39 |   transition: opacity 0.35s;
 40 | }
 41 | 
 42 | figure.caption::after {
 43 |   content: "";
 44 |   background: #ffffff;
 45 |   width: 100%;
 46 |   height: 100%;
 47 |   position: absolute;
 48 |   left: 0;
 49 |   bottom: 0;
 50 |   opacity: 0.75;
 51 |   transform: skew(-45deg) scaleX(0);
 52 |   transition: 0.3s ease-in-out;
 53 | }
 54 | 
 55 | figure.caption:hover::after {
 56 |   transform: skew(-45deg) scaleX(1);
 57 |   transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
 58 | }
 59 | 
 60 | figure.caption figcaption {
 61 |   position: absolute;
 62 |   top: 50%;
 63 |   left: 0;
 64 |   width: 100%;
 65 |   transform: translateY(-50%);
 66 |   z-index: 1;
 67 | }
 68 | 
 69 | figure.caption h2,
 70 | figure.caption p {
 71 |   margin: 0;
 72 |   width: 100%;
 73 |   opacity: 0;
 74 | }
 75 | 
 76 | figure.caption h2 {
 77 |   padding: 0 30px;
 78 |   display: inline-block;
 79 |   text-transform: uppercase;
 80 |   font-weight: 400;
 81 | }
 82 | 
 83 | figure.caption p {
 84 |   padding: 0 50px;
 85 |   font-size: 0.8em;
 86 |   font-weight: 500;
 87 | }
 88 | 
 89 | figure.caption:hover figcaption h2 {
 90 |   opacity: 1;
 91 | }
 92 | 
 93 | figure.caption:hover figcaption p {
 94 |   opacity: 0.7;
 95 | }
 96 | 
 97 | figure.caption a {
 98 |   left: 0;
 99 |   right: 0;
100 |   top: 0;
101 |   bottom: 0;
102 |   position: absolute;
103 |   z-index: 1;
104 | }
105 | 


--------------------------------------------------------------------------------
/Image Caption v2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Image Caption v2</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <figure class="caption">
12 |       <img
13 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample72.jpg"
14 |         alt="sample2"
15 |       />
16 |       <figcaption>
17 |         <h3>Fletch Skinner</h3>
18 |         <p>
19 |           I don't need to compromise my principles, because they don't have the
20 |           slightest bearing on what happens to me anyway.
21 |         </p>
22 |       </figcaption>
23 |       <a href="#"></a>
24 |     </figure>
25 |     <figure class="caption">
26 |       <img
27 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg"
28 |         alt="sample2"
29 |       />
30 |       <figcaption>
31 |         <h3>Indigo Violet</h3>
32 |         <p>
33 |           What's the point of wearing your favorite rocketship underpants if
34 |           nobody ever asks to see 'em?
35 |         </p>
36 |       </figcaption>
37 |       <a href="#"></a>
38 |     </figure>
39 |     <figure class="caption">
40 |       <img
41 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample34.jpg"
42 |         alt="sample2"
43 |       />
44 |       <figcaption>
45 |         <h3>Gunther Beard</h3>
46 |         <p>
47 |           Given that sooner or later we're all just going to die, what's the
48 |           point of learning about integers?
49 |         </p>
50 |       </figcaption>
51 |       <a href="#"></a>
52 |     </figure>
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Image Caption v2/style.css:
--------------------------------------------------------------------------------
  1 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700);
  2 | 
  3 | html {
  4 |   height: 100%;
  5 | }
  6 | 
  7 | body {
  8 |   height: 100%;
  9 |   display: flex;
 10 |   align-items: center;
 11 |   justify-content: center;
 12 |   background-color: #212121;
 13 |   flex-wrap: wrap;
 14 | }
 15 | 
 16 | .caption {
 17 |   position: relative;
 18 |   font-family: "Raleway", Arial, sans-serif;
 19 |   color: white;
 20 |   min-width: 250px;
 21 |   max-width: 310px;
 22 |   width: 100%;
 23 |   margin: 10px;
 24 |   background-color: black;
 25 | }
 26 | 
 27 | .caption * {
 28 |   box-sizing: border-box;
 29 |   transition: all 0.4s ease-in;
 30 | }
 31 | 
 32 | .caption img {
 33 |   position: relative;
 34 |   max-width: 100%;
 35 |   vertical-align: top;
 36 | }
 37 | 
 38 | .caption figcaption {
 39 |   position: absolute;
 40 |   top: 0;
 41 |   right: 0;
 42 |   z-index: 1;
 43 |   width: 100%;
 44 |   height: 100%;
 45 |   padding: 20px 30px;
 46 |   opacity: 0;
 47 | }
 48 | 
 49 | .caption figcaption:before,
 50 | .caption figcaption:after {
 51 |   width: 10px;
 52 |   height: 0%;
 53 | }
 54 | 
 55 | .caption figcaption::before {
 56 |   right: 0;
 57 |   top: 0;
 58 | }
 59 | 
 60 | .caption figcaption::after {
 61 |   left: 0;
 62 |   bottom: 0;
 63 | }
 64 | 
 65 | .caption h3,
 66 | .caption p {
 67 |   line-height: 1.5rem;
 68 | }
 69 | 
 70 | .caption h3 {
 71 |   margin: 0 0 5px;
 72 |   font-weight: 700;
 73 |   text-transform: uppercase;
 74 | }
 75 | 
 76 | .caption p {
 77 |   font-size: 0.8em;
 78 |   font-weight: 500;
 79 |   margin: 0 0 15px;
 80 | }
 81 | 
 82 | .caption a {
 83 |   position: absolute;
 84 |   top: 0;
 85 |   bottom: 0;
 86 |   right: 0;
 87 |   left: 0;
 88 |   z-index: 1;
 89 | }
 90 | 
 91 | .caption::before,
 92 | .caption::after,
 93 | .caption figcaption::before,
 94 | .caption figcaption::after {
 95 |   content: "";
 96 |   position: absolute;
 97 |   background-color: white;
 98 |   z-index: 1;
 99 |   transition: all 0.4s ease-in;
100 |   opacity: 0.8;
101 | }
102 | 
103 | .caption::before,
104 | .caption::after {
105 |   height: 10px;
106 |   width: 0%;
107 | }
108 | 
109 | .caption::before {
110 |   top: 0;
111 |   left: 0;
112 | }
113 | 
114 | .caption::after {
115 |   bottom: 0;
116 |   right: 0;
117 | }
118 | 
119 | .caption:hover img {
120 |   opacity: 0.4;
121 | }
122 | 
123 | .caption:hover figcaption {
124 |   opacity: 1;
125 | }
126 | 
127 | .caption:hover::before,
128 | .caption:hover::after {
129 |   width: 100%;
130 | }
131 | 
132 | .caption:hover figcaption::before,
133 | .caption:hover figcaption::after {
134 |   height: 100%;
135 | }
136 | 
137 | .caption:hover:before,
138 | .caption:hover:after,
139 | .caption:hover figcaption::before,
140 | .caption:hover figcaption::after {
141 |   opacity: 0.1;
142 | }
143 | 


--------------------------------------------------------------------------------
/Image Caption v3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Image Caption v3</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <figure class="caption">
12 |       <img
13 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample78.jpg"
14 |         alt="sample67"
15 |       />
16 |       <div class="border one">
17 |         <div></div>
18 |       </div>
19 |       <div class="border two">
20 |         <div></div>
21 |       </div>
22 |       <a href="#"></a>
23 |     </figure>
24 |     <figure class="caption">
25 |       <img
26 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample27.jpg"
27 |         alt="sample67"
28 |       />
29 |       <div class="border one">
30 |         <div></div>
31 |       </div>
32 |       <div class="border two">
33 |         <div></div>
34 |       </div>
35 |       <a href="#"></a>
36 |     </figure>
37 |     <figure class="caption">
38 |       <img
39 |         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg"
40 |         alt="sample67"
41 |       />
42 |       <div class="border one">
43 |         <div></div>
44 |       </div>
45 |       <div class="border two">
46 |         <div></div>
47 |       </div>
48 |       <a href="#"></a>
49 |     </figure>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/Image Caption v3/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   height: 100%;
  3 | }
  4 | 
  5 | body {
  6 |   height: 100%;
  7 |   display: flex;
  8 |   align-items: center;
  9 |   justify-content: center;
 10 |   flex-wrap: wrap;
 11 |   background-color: #212121;
 12 | }
 13 | 
 14 | .caption {
 15 |   position: relative;
 16 |   min-width: 230px;
 17 |   max-width: 315px;
 18 |   width: 100%;
 19 |   -webkit-box-sizing: padding-box;
 20 |   box-sizing: padding-box;
 21 |   box-shadow: none !important;
 22 |   -webkit-transform: translateZ(0);
 23 |   transform: translateZ(0);
 24 |   margin: 7px;
 25 |   padding: 6px;
 26 | }
 27 | 
 28 | .caption img {
 29 |   width: 100%;
 30 |   vertical-align: top;
 31 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 32 | }
 33 | 
 34 | .caption .border {
 35 |   position: absolute;
 36 |   opacity: 0.45;
 37 | }
 38 | 
 39 | .caption .border::before,
 40 | .caption .border::after,
 41 | .caption .border div::before,
 42 | .caption .border div::after {
 43 |   content: "";
 44 |   background-color: #f4b043;
 45 |   position: absolute;
 46 |   display: block;
 47 |   transition: all 0.4s ease-in-out;
 48 | }
 49 | 
 50 | .caption .border::before,
 51 | .caption .border::after {
 52 |   width: 0;
 53 |   height: 1px;
 54 | }
 55 | 
 56 | .caption .border div::before,
 57 | .caption .border div::after {
 58 |   width: 1px;
 59 |   height: 0;
 60 | }
 61 | 
 62 | .caption .border.one {
 63 |   left: 0;
 64 |   top: 0;
 65 |   right: 12px;
 66 |   bottom: 12px;
 67 | }
 68 | 
 69 | .caption .border.one::before,
 70 | .caption .border.one div::before {
 71 |   left: 0;
 72 |   top: 0;
 73 | }
 74 | 
 75 | .caption .border.one::after,
 76 | .caption .border.one div::after {
 77 |   bottom: 0;
 78 |   right: 0;
 79 | }
 80 | 
 81 | .caption .border.two {
 82 |   left: 12px;
 83 |   top: 12px;
 84 |   right: 0;
 85 |   bottom: 0;
 86 | }
 87 | 
 88 | .caption .border.two:before,
 89 | .caption .border.two div:before {
 90 |   right: 0;
 91 |   top: 0;
 92 | }
 93 | 
 94 | .caption .border.two:after,
 95 | .caption .border.two div:after {
 96 |   bottom: 0;
 97 |   left: 0;
 98 | }
 99 | 
100 | .caption a {
101 |   left: 0;
102 |   right: 0;
103 |   top: 0;
104 |   bottom: 0;
105 |   position: absolute;
106 |   z-index: 1;
107 | }
108 | 
109 | .caption:hover .border::before,
110 | .caption:hover .border::after {
111 |   width: 100%;
112 | }
113 | 
114 | .caption:hover .border div::before,
115 | .caption:hover .border div::after {
116 |   height: 100%;
117 | }
118 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CSS-SCSS
  2 | This repo is a project to design and implement various animations including 3D and slider using CSS and SCSS.
  3 | All animations were inspired and implemented by CodePen.
  4 | - [CSS-SCSS](#css-scss)
  5 |   - [Table of contents](#table-of-contents)
  6 |   - [3D Card](#3d-card)
  7 |     - [CSS](#css)
  8 |   - [3D Carousel](#3d-carousel)
  9 |     - [Start Effect](#start-effect)
 10 |     - [Image 3D Effect](#image-3d-effect)
 11 |     - [Mouse Event Effect](#mouse-event-effect)
 12 |   - [3D Card Hover](#3d-card-hover)
 13 |     - [Caption Animation](#caption-animation)
 14 |     - [Image Effect](#image-effect)
 15 |   - [3D Card Effect](#3d-card-effect)
 16 |     - [Add mouse event listener](#add-mouse-event-listener)
 17 |   - [3D Card Effect V2](#3d-card-effect-v2)
 18 |     - [Mouse Event](#mouse-event)
 19 |   - [3D Image Hover](#3d-image-hover)
 20 |     - [Animation](#animation)
 21 |   - [3D Thumb Image Effect](#3d-thumb-image-effect)
 22 |     - [Book Effect](#book-effect)
 23 |     - [Shadow Effect](#shadow-effect)
 24 |   - [Image Caption v1](#image-caption-v1)
 25 |     - [Caption Animation](#caption-animation-1)
 26 |   - [Image Caption v2](#image-caption-v2)
 27 |     - [Caption Animation](#caption-animation-2)
 28 |   - [Image Caption v2](#image-caption-v2-1)
 29 |   - [Border Effect](#border-effect)
 30 |     - [Border Animation](#border-animation)
 31 |     - [Image Effect](#image-effect-1)
 32 |   - [Button Effect (Simple)](#button-effect-simple)
 33 |     - [Line Hover Effect](#line-hover-effect)
 34 |   - [Button Effect (Simple)](#button-effect-simple-1)
 35 |     - [Glow Button](#glow-button)
 36 |       - [Neon Animation](#neon-animation)
 37 |       - [Glow Effect](#glow-effect)
 38 | 
 39 | ## Table of contents[](#table-of-contents)
 40 | - 3D Card
 41 | 
 42 | ## 3D Card[](#3d-card)
 43 | <div style="display:flex;align-items:center;justify-content:center;width:100%;">
 44 |   <img align="center" src="/screenshot/3D_Card/screenshot.jpg" alt="3D Card" style="width:50%;height:50%"/>
 45 | </div>
 46 | This project is a project that implements a 3D card using CSS.
 47 | 
 48 | ### CSS
 49 | ```
 50 | .card:hover .wrapper {
 51 |   transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
 52 |   box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 53 |   -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 54 |   -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 55 | }
 56 | ```
 57 | 
 58 | ## 3D Carousel[](#3d-carousel)
 59 | <div style="display:flex;align-items:center;justify-content:center;">
 60 |   <img align="center" src="/screenshot/3D_Carousel/Carousel.jpg" alt="3D_Carousel" style="width:50%;height:50%"/>
 61 | </div>
 62 | This project is a project that implements the image carousel effect using CSS and JavaScript.
 63 | 
 64 | ### Start Effect
 65 | ```
 66 | for (var i = 0; i < imgs.length; i++) {
 67 |     imgs[i].style.transform = "rotateY(" + i * (360 / imgs.length) + "deg) translateZ(" + radius + "px)";
 68 |     imgs[i].style.transition = "transform 1s";
 69 |     imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + "s";
 70 |   }
 71 | ```
 72 | 
 73 | ### Image 3D Effect
 74 | ```
 75 | img {
 76 |   transform-style: preserve-3d;
 77 |   position: absolute;
 78 |   left: 0;
 79 |   top: 0;
 80 |   width: 100%;
 81 |   height: 100%;
 82 |   line-height: 200px;
 83 |   font-size: 50px;
 84 |   text-align: center;
 85 |   box-shadow: 0 0 8px #fff;
 86 |   -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
 87 | }
 88 | ```
 89 | 
 90 | ### Mouse Event Effect
 91 | ```
 92 | document.onpointerdown = function (e) {
 93 |   clearInterval(wheel.timer);
 94 |   e = e || window.event;
 95 |   var sX = e.clientX, sY = e.clientY;
 96 | 
 97 |   this.onpointermove = function (e) {
 98 |     e = e || window.event;
 99 |     var nX = e.clientX, nY = e.clientY;
100 |     desX = nX - sX;
101 |     desY = nY - sY;
102 |     tX += desX * 0.1;
103 |     tY += desY * 0.1;
104 |     applyTransform(wheel);
105 |     sX = nX;
106 |     sY = nY;
107 |   };
108 | 
109 |   this.onpointerup = function (e) {
110 |     wheel.timer = setInterval(function () {
111 |       desX *= 0.95;
112 |       desY *= 0.95;
113 |       tX += desX * 0.1;
114 |       tY += desY * 0.1;
115 |       applyTransform(wheel);
116 |       playSpin(false);
117 |       if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
118 |         clearInterval(wheel.timer);
119 |         playSpin(true);
120 |       }
121 |     }, 17);
122 |     this.onpointermove = this.onpointerup = null;
123 |   };
124 | 
125 |   return false;
126 | };
127 | ```
128 | 
129 | ## 3D Card Hover[](#3d-card-hover)
130 | <img align="center" src="/screenshot/3D_Card_Hover/Screenshot.jpg" alt="3D Card Hover" style="width:50%;height:50%"/>
131 | This project shows 3D animation using characters.
132 | 
133 | ### Caption Animation
134 | ```
135 | figcaption {
136 |   grid-area: 1/1;
137 |   width: calc(100% + 40px);
138 |   font-family: Exoct;
139 |   color: white;
140 |   font-size: min(32px, 5vmin);
141 |   text-align: center;
142 |   place-self: end center;
143 |   transform: perspective(500px) translateY(100%) rotateX(-90deg);
144 |   backface-visibility: hidden;
145 |   transform-origin: top;
146 |   background: #000;
147 |   transition: 0.5s;
148 | }
149 | ```
150 | 
151 | ### Image Effect 
152 | ```
153 | figure {
154 |   width: 100%;
155 |   aspect-ratio: 1;
156 |   margin: 0 0 60px;
157 |   padding: 5px 20px 0;
158 |   box-sizing: border-box;
159 |   display: grid;
160 |   grid-template-rows: 100%;
161 |   cursor: pointer;
162 |   position: relative;
163 |   filter: drop-shadow(0 0 20px rgb(0 0 0/50%));
164 | }
165 | 
166 | figure:before {
167 |   background-image: url(https://assets.codepen.io/1480814/necro-back.jpg);
168 | }
169 | 
170 | figure + figure:before {
171 |   background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg);
172 | }
173 | ```
174 | 
175 | ## 3D Card Effect[](#3d-card-effect)
176 | <img align="center" src="/screenshot/3D_Card_Effect/3D_Card_Effect.jpg" alt="3D Card Effect" style="width:50%;height:50%"/>
177 | This project is a project that shows a 3D card using mouse events.
178 | 
179 | ### Add mouse event listener
180 | ```
181 | container.addEventListener("mousemove", (e) => {
182 |   let X = (window.innerWidth / 2 - e.pageX) / 30;
183 |   let Y = (window.innerHeight / 2 - e.pageY) / 30;
184 | 
185 |   card.style.transition = "none";
186 |   card.style.transform = `rotateX(${X}deg) rotateY(${Y}deg)`;
187 | });
188 | ```
189 | 
190 | ## 3D Card Effect V2[](#3d-card-effect-v2)
191 | <img align="center" src="/screenshot/3D_Card_Effect_V2/Screenshot.jpg" alt="3D Card Effect V2" style="width:100%;height:100%"/>
192 | 
193 | ### Mouse Event
194 | ```
195 | window.addEventListener("DOMContentLoaded", (event) => {
196 |   const cards = document.querySelectorAll(".card");
197 |   cards.forEach((e) => {
198 |     e.addEventListener("mousemove", (event) => {
199 |       const rect = e.getBoundingClientRect();
200 |       const centerX = (rect.left + rect.right) / 2;
201 |       const centerY = (rect.top + rect.bottom) / 2;
202 |       const posX = event.pageX - centerX;
203 |       const posY = event.pageY - centerY;
204 |       const x = remap(posX, rect.width / 2, angle);
205 |       const y = remap(posY, rect.height / 2, angle);
206 |       e.dataset.rotateX = x;
207 |       e.dataset.rotateY = -y;
208 |     });
209 | 
210 |     e.addEventListener("mouseout", (event) => {
211 |       e.dataset.rotateX = 0;
212 |       e.dataset.rotateY = 0;
213 |     });
214 |   });
215 | 
216 |   const update = () => {
217 |     cards.forEach((e) => {
218 |       let currentX = parseFloat(
219 |         e.style.getPropertyValue("--rotateY").slice(0, -1)
220 |       );
221 |       let currentY = parseFloat(
222 |         e.style.getPropertyValue("--rotateX").slice(0, -1)
223 |       );
224 |       if (isNaN(currentX)) currentX = 0;
225 |       if (isNaN(currentY)) currentY = 0;
226 |       const x = lerp(currentX, e.dataset.rotateX, 0.05);
227 |       const y = lerp(currentY, e.dataset.rotateY, 0.05);
228 |       e.style.setProperty("--rotateY", x + "deg");
229 |       e.style.setProperty("--rotateX", y + "deg");
230 |     });
231 |   };
232 |   setInterval(update, 1000 / 60);
233 | });
234 | ```
235 | 
236 | ## 3D Image Hover[](#3d-image-hover)
237 | <img align="center" src="/screenshot/3D_Image_Hover/3DImageHover.jpg" alt="3D Image Hover" style="width:50%;height:50%"/>
238 | This project implemented multiple sliders animation using CSS.
239 | 
240 | ### Animation
241 | ```
242 | .container:hover img:nth-child(4) {
243 |   transform: translate(160px, -160px);
244 |   opacity: 1;
245 | }
246 | 
247 | .container:hover img:nth-child(3) {
248 |   transform: translate(120px, -120px);
249 |   opacity: 0.8;
250 | }
251 | 
252 | .container:hover img:nth-child(2) {
253 |   transform: translate(80px, -80px);
254 |   opacity: 0.6;
255 | }
256 | 
257 | .container:hover img:nth-child(1) {
258 |   transform: translate(40px, -40px);
259 |   opacity: 0.4;
260 | }
261 | ```
262 | 
263 | ## 3D Thumb Image Effect[](#3d-thumb-image-effect)
264 | <img align="center" src="/screenshot/3D_Thumb_Image_Animation/Screenshot.jpg" alt="3D Thumb Effect" style="width:100%;height:100%"/>
265 | 
266 | ### Book Effect
267 | ```
268 | .thumb a:after {
269 |   content: "";
270 |   position: absolute;
271 |   left: 0;
272 |   bottom: 0;
273 |   width: 100%;
274 |   height: 36px;
275 |   background: inherit;
276 |   background-size: cover, cover;
277 |   background-position: bottom;
278 |   transform: rotateX(90deg);
279 |   transform-origin: bottom;
280 | }
281 | ```
282 | 
283 | ### Shadow Effect
284 | ```
285 | .thumb a:before {
286 |   content: "";
287 |   position: absolute;
288 |   top: 0;
289 |   left: 0;
290 |   width: 100%;
291 |   height: 100%;
292 |   background: rgba(0, 0, 0, 0.5);
293 |   box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
294 |   transition: all 0.5s;
295 |   opacity: 0.15;
296 |   transform: rotateX(95deg) translateZ(-80px) scale(0.75);
297 |   transform-origin: bottom;
298 | }
299 | 
300 | .thumb:hover a:before {
301 |   opacity: 1;
302 |   box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
303 |   transform: rotateX(0) translateZ(-60px) scale(0.85);
304 | }
305 | ```
306 | 
307 | ## Image Caption v1[](#image-caption-v1)
308 | <img align="center" src="/screenshot/Image_Caption_v1/Screenshot.jpg" alt="Image Caption v1" style="width:100%;height:100%"/>
309 | 
310 | ### Caption Animation
311 | ```
312 | figure.caption::after {
313 |   content: "";
314 |   background: #ffffff;
315 |   width: 100%;
316 |   height: 100%;
317 |   position: absolute;
318 |   left: 0;
319 |   bottom: 0;
320 |   opacity: 0.75;
321 |   transform: skew(-45deg) scaleX(0);
322 |   transition: 0.3s ease-in-out;
323 | }
324 | 
325 | figure.caption:hover::after {
326 |   transform: skew(-45deg) scaleX(1);
327 |   transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
328 | }
329 | ```
330 | 
331 | ## Image Caption v2[](#image-caption-v2)
332 | <img align="center" src="/screenshot/Image_Caption_v2/Screenshot.jpg" alt="Image Caption v2" style="width:100%;height:100%"/>
333 | 
334 | ### Caption Animation
335 | ```
336 | .caption::before,
337 | .caption::after {
338 |   height: 10px;
339 |   width: 0%;
340 | }
341 | 
342 | .caption::before {
343 |   top: 0;
344 |   left: 0;
345 | }
346 | 
347 | .caption::after {
348 |   bottom: 0;
349 |   right: 0;
350 | }
351 | 
352 | .caption:hover::before,
353 | .caption:hover::after {
354 |   width: 100%;
355 | }
356 | ```
357 | 
358 | ## Image Caption v2[](#image-caption-v2)
359 | <img align="center" src="/screenshot/Image_Caption_v3/Screenshot.jpg" alt="Image Caption v3" style="width:100%;height:100%"/>
360 | 
361 | 
362 | ## Border Effect[](#border-effect)
363 | <div style="display:flex;align-items:center;justify-content:center;">
364 |   <img align="center" src="/screenshot/Border_Effect/Screenshot.jpg" alt="Border Effect" style="width:30%;height:30%"/>
365 | </div>
366 | This project uses Vanilla CSS to apply a floating border effect to image.
367 | 
368 | ### Border Animation
369 | ```
370 | @-webkit-keyframes morph {
371 |   0% {
372 |     border-radius: 40% 60% 60% 40%/60% 30% 70% 40%;
373 |   }
374 |   100% {
375 |     border-radius: 40% 60%;
376 |   }
377 | }
378 | 
379 | @keyframes morph {
380 |   0% {
381 |     border-radius: 40% 60% 60% 40%/60% 30% 70% 40%;
382 |   }
383 |   100% {
384 |     border-radius: 40% 60%;
385 |   }
386 | }
387 | 
388 | .shape {
389 |   width: 100%;
390 |   height: 100%;
391 |   transition: border-radius 1s ease-out;
392 |   -webkit-animation: morph 8s ease-in-out infinite both alternate;
393 |   animation: morph 8s ease-in-out infinite both alternate;
394 |   border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
395 |   position: absolute;
396 |   overflow: hidden;
397 |   z-index: 5;
398 | }
399 | ```
400 | 
401 | ### Image Effect
402 | To fix the image, the same effect is applied to the image and the border container.
403 | ```
404 | .bd {
405 |   width: 120%;
406 |   height: 120%;
407 |   position: absolute;
408 |   left: -10%;
409 |   top: -10%;
410 |   background: url("img/1.jpg");
411 |   background-size: 100%;
412 |   background-position: center -9%;
413 |   display: flex;
414 |   align-items: center;
415 |   justify-content: center;
416 |   animation: spin 12s linear infinite reverse;
417 |   z-index: 2;
418 | }
419 | 
420 | @-webkit-keyframes spin {
421 |   to {
422 |     transform: rotate(1turn);
423 |   }
424 | }
425 | 
426 | @keyframes spin {
427 |   to {
428 |     transform: rotate(1turn);
429 |   }
430 | }
431 | ```
432 | 
433 | ## Button Effect (Simple)[](#button-effect-simple)
434 | <img align="center" src="/screenshot/Button_Effect_Simple/Screenshot.jpg" alt="Button Effect Simple" style="width:100%;height:100%"/>
435 | This project is collections of simple effects of Button hovers.
436 | 
437 | ### Line Hover Effect
438 | CSS
439 | ```
440 | svg {
441 |   position: absolute;
442 |   left: 0;
443 |   top: 0;
444 |   fill: none;
445 |   stroke: #fff;
446 |   stroke-dasharray: 150 480;
447 |   stroke-dashoffset: 150;
448 |   transition: 1s ease-in-out;
449 | }
450 | 
451 | .btn-one .btn:hover svg {
452 |   stroke-dashoffset: -480;
453 | }
454 | ```
455 | 
456 | HTML
457 | ```
458 | <svg>
459 |   <polyline class="bg-line" points="179,1 179,59 1,59 1,1 179,1" />
460 |   <polyline class="hi-line" points="179,1 179,59 1,59 1,1 179,1" />
461 | </svg>
462 | ```
463 | 
464 | ## Button Effect (Simple)[](#button-effect-simple)
465 | <img align="center" src="/screenshot/Button_Effect_Simple/Screenshot.jpg" alt="Button Effect Simple" style="width:100%;height:100%"/>
466 | This project is using Vanilla CSS to 3D effect.
467 | 
468 | ### Glow Button
469 | 
470 | #### Neon Animation
471 | ```
472 | @keyframes border-flicker {
473 |   0% {
474 |     opacity: 0.1;
475 |   }
476 |   2% {
477 |     opacity: 1;
478 |   }
479 |   3% {
480 |     opacity: 0.1;
481 |   }
482 |   8% {
483 |     opacity: 1;
484 |   }
485 |   70% {
486 |     opacity: 0.7;
487 |   }
488 |   100% {
489 |     opacity: 1;
490 |   }
491 | }
492 | ```
493 | 
494 | #### Glow Effect
495 | ```
496 | .glowing-btn::before {
497 |   content: "";
498 |   position: absolute;
499 |   top: 0;
500 |   bottom: 0;
501 |   left: 0;
502 |   right: 0;
503 |   filter: blur(1em);
504 |   background: var(--glow-color);
505 |   transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
506 |   pointer-events: none;
507 | }
508 | ```


--------------------------------------------------------------------------------
/screenshot/3D_Card/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card/screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/3D_Card_Effect/3D_Card_Effect.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card_Effect/3D_Card_Effect.jpg


--------------------------------------------------------------------------------
/screenshot/3D_Card_Effect_V2/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card_Effect_V2/Screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/3D_Card_Hover/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card_Hover/Screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/3D_Carousel/Carousel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Carousel/Carousel.jpg


--------------------------------------------------------------------------------
/screenshot/3D_Image_Hover/3DImageHover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Image_Hover/3DImageHover.jpg


--------------------------------------------------------------------------------
/screenshot/3D_Thumb_Image_Animation/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Thumb_Image_Animation/Screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/Button_Effect_Simple/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Button_Effect_Simple/Screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/Image_Caption_v1/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Image_Caption_v1/Screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/Image_Caption_v2/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Image_Caption_v2/Screenshot.jpg


--------------------------------------------------------------------------------
/screenshot/Image_Caption_v3/Screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Image_Caption_v3/Screenshot.jpg


--------------------------------------------------------------------------------
/src/3D Card/dark_rider-character.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/dark_rider-character.webp


--------------------------------------------------------------------------------
/src/3D Card/dark_rider-cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/dark_rider-cover.jpg


--------------------------------------------------------------------------------
/src/3D Card/dark_rider-title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/dark_rider-title.png


--------------------------------------------------------------------------------
/src/3D Card/force_mage-character.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/force_mage-character.webp


--------------------------------------------------------------------------------
/src/3D Card/force_mage-cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/force_mage-cover.jpg


--------------------------------------------------------------------------------
/src/3D Card/force_mage-title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/force_mage-title.png


--------------------------------------------------------------------------------
/src/3D_Caoucel/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/1.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/2.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/3.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/4.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/5.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/6.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/7.jpg


--------------------------------------------------------------------------------
/src/3D_Caoucel/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/8.jpg


--------------------------------------------------------------------------------