logo

Effet sur image fléche

HTML :

  1. <div class="start3">
  2. <div class="promo" style="--overlay-color: hotpink">
  3. <div class="image-wrapper"><img src="../../all-css/imgTest/3.jpg" alt="truc"></div>
  4. <h2 class="titre" data-cta="Get out there ?">.................</h2>
  5. </div>
  6. <div class="promo" style="--overlay-color: yellow">
  7. <div class="image-wrapper"><img src="../../all-css/imgTest/7.jpg" alt="truc"></div>
  8. <h2 class="titre" data-cta="Find yours ?">................</h2>
  9. </div>
  10. <div class="promo" style="--overlay-color: dodgerblue">
  11. <div class="image-wrapper"><img src="../../all-css/imgTest/9.jpg" alt="truc"></div>
  12. <h2 class="titre" data-cta="Grab a board ?">.................</h2>
  13. </div>
  14. <div class="promo" style="--overlay-color: darkgreen">
  15. <div class="image-wrapper"><img src="../../all-css/imgTest/6.jpg" alt="truc"></div>
  16. <h2 class="titre" data-cta="Take a walk ?">.......................</h2>
  17. </div>
  18. </div>

CSS :

  1. <style>
  2. :root {
  3. --size: 60vmin;
  4. --space: 8vmin;
  5. --duration: 300ms;
  6. --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  7. --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  8. }
  9.  
  10. * {
  11. box-sizing: border-box;
  12. }
  13.  
  14. .start3 {
  15. display: grid;
  16. place-items: center;
  17. grid-gap: var(--space);
  18. margin: 0 auto;
  19. padding: var(--space);
  20. font-family: "Sura", sans-serif;
  21. color: white;
  22. background-color: rgb(29, 30, 34);
  23. }
  24.  
  25. .promo {
  26. position: relative;
  27. cursor: pointer;
  28. width: var(--size);
  29. height: var(--size);
  30. }
  31.  
  32. .titre {
  33. --font-size: calc(var(--size) / 8);
  34.  
  35. display: flex;
  36. align-items: center;
  37. position: absolute;
  38. left: 0;
  39. bottom: 0;
  40. font-size: var(--font-size);
  41. font-weight: 700;
  42. line-height: 1.2;
  43. white-space: nowrap;
  44. transform: translate(-10%, -50%);
  45. transition: transform var(--duration) var(--ease-out);
  46. }
  47.  
  48. .titre::after {
  49. content: attr(data-cta);
  50. display: inline-block;
  51. margin-left: 1.5vmin;
  52. font-size: calc(var(--font-size) / 3.25);
  53. font-weight: 400;
  54. letter-spacing: 0.125vmin;
  55. opacity: 0;
  56. transform: translateX(-25%);
  57. transition: transform var(--duration) var(--ease-out),
  58. opacity var(--duration) var(--ease-out);
  59. }
  60.  
  61. .image-wrapper {
  62. width: var(--size);
  63. height: var(--size);
  64. overflow: hidden;
  65. clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  66. transition: transform var(--duration) var(--ease-out),
  67. clip-path var(--duration) var(--ease-out);
  68. }
  69.  
  70. .image-wrapper img {
  71. position: relative;
  72. width: 120%;
  73. height: 100%;
  74. object-fit: cover;
  75. transform: translateX(-10%);
  76. transition: transform var(--duration) var(--ease-out);
  77. }
  78.  
  79. .image-wrapper::after {
  80. content: "";
  81. position: absolute;
  82. top: 0;
  83. left: 0;
  84. width: 100%;
  85. height: 100%;
  86. background-color: var(--overlay-color);
  87. mix-blend-mode: multiply;
  88. opacity: 0;
  89. transform: translateZ(0);
  90. transition: opacity var(--duration) var(--ease-out);
  91. }
  92.  
  93. .promo:hover img {
  94. transform: translateX(0);
  95. }
  96.  
  97. .promo:hover .image-wrapper {
  98. clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  99. transform: translateX(25%);
  100. transition-timing-function: var(--bounce-out);
  101. }
  102.  
  103. .promo:hover .titre {
  104. transform: translate(5%, -50%);
  105. transition-timing-function: var(--bounce-out);
  106. }
  107.  
  108. .promo:hover .titre::after {
  109. opacity: 1;
  110. transform: translateX(0);
  111. transition-timing-function: var(--bounce-out);
  112. }
  113.  
  114. .promo:hover .image-wrapper::after {
  115. opacity: 1;
  116. }
  117. </style>