HTML :
- <div class="start3">
- <div class="promo" style="--overlay-color: hotpink">
- <div class="image-wrapper"><img src="../../all-css/imgTest/3.jpg" alt="truc"></div>
- <h2 class="titre" data-cta="Get out there ?">.................</h2>
- </div>
- <div class="promo" style="--overlay-color: yellow">
- <div class="image-wrapper"><img src="../../all-css/imgTest/7.jpg" alt="truc"></div>
- <h2 class="titre" data-cta="Find yours ?">................</h2>
- </div>
- <div class="promo" style="--overlay-color: dodgerblue">
- <div class="image-wrapper"><img src="../../all-css/imgTest/9.jpg" alt="truc"></div>
- <h2 class="titre" data-cta="Grab a board ?">.................</h2>
- </div>
- <div class="promo" style="--overlay-color: darkgreen">
- <div class="image-wrapper"><img src="../../all-css/imgTest/6.jpg" alt="truc"></div>
- <h2 class="titre" data-cta="Take a walk ?">.......................</h2>
- </div>
- </div>
CSS :
- <style>
- :root {
- --size: 60vmin;
- --space: 8vmin;
- --duration: 300ms;
- --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
- --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
- }
- * {
- box-sizing: border-box;
- }
- .start3 {
- display: grid;
- place-items: center;
- grid-gap: var(--space);
- margin: 0 auto;
- padding: var(--space);
- font-family: "Sura", sans-serif;
- color: white;
- background-color: rgb(29, 30, 34);
- }
- .promo {
- position: relative;
- cursor: pointer;
- width: var(--size);
- height: var(--size);
- }
- .titre {
- --font-size: calc(var(--size) / 8);
- display: flex;
- align-items: center;
- position: absolute;
- left: 0;
- bottom: 0;
- font-size: var(--font-size);
- font-weight: 700;
- line-height: 1.2;
- white-space: nowrap;
- transform: translate(-10%, -50%);
- transition: transform var(--duration) var(--ease-out);
- }
- .titre::after {
- content: attr(data-cta);
- display: inline-block;
- margin-left: 1.5vmin;
- font-size: calc(var(--font-size) / 3.25);
- font-weight: 400;
- letter-spacing: 0.125vmin;
- opacity: 0;
- transform: translateX(-25%);
- transition: transform var(--duration) var(--ease-out),
- opacity var(--duration) var(--ease-out);
- }
- .image-wrapper {
- width: var(--size);
- height: var(--size);
- overflow: hidden;
- clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
- transition: transform var(--duration) var(--ease-out),
- clip-path var(--duration) var(--ease-out);
- }
- .image-wrapper img {
- position: relative;
- width: 120%;
- height: 100%;
- object-fit: cover;
- transform: translateX(-10%);
- transition: transform var(--duration) var(--ease-out);
- }
- .image-wrapper::after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: var(--overlay-color);
- mix-blend-mode: multiply;
- opacity: 0;
- transform: translateZ(0);
- transition: opacity var(--duration) var(--ease-out);
- }
- .promo:hover img {
- transform: translateX(0);
- }
- .promo:hover .image-wrapper {
- clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
- transform: translateX(25%);
- transition-timing-function: var(--bounce-out);
- }
- .promo:hover .titre {
- transform: translate(5%, -50%);
- transition-timing-function: var(--bounce-out);
- }
- .promo:hover .titre::after {
- opacity: 1;
- transform: translateX(0);
- transition-timing-function: var(--bounce-out);
- }
- .promo:hover .image-wrapper::after {
- opacity: 1;
- }
- </style>