Effet de survol GSAP

1635 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 July 2025

Modèle HTML CSS de carte de profil Neumorphic

18 December 2025

Chargeur de jeu Unity WebGL Slope Plus

28 November 2024

Arrière-plan animé de la matrice

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'><link rel="stylesheet" href="./style.css">

</head>
<body>
<section class="cards__wrapper">
	<figure class="card">
		<div class="card__image--wrapper">
			<div class="card__image--outer">
				<img src="https://t.ly/xgCIZ" alt="Portrait" class="card__image" />
			</div>
		</div>
		<div class="card__text">
			<span class="card__text--inner" data-splitting>STYLE</span>
		</div>
	</figure>

<figure class="card">
		<div class="card__image--wrapper">
			<div class="card__image--outer">
				<img src="https://t.ly/GsIR4" alt="Portrait" class="card__image" />
			</div>
		</div>
		<div class="card__text">
			<span class="card__text--inner" data-splitting>PRAISE</span>
		</div>
	</figure>

<figure class="card">
		<div class="card__image--wrapper">
			<div class="card__image--outer">
				<img src="https://t.ly/RfNBf" alt="Portrait" class="card__image" />
			</div>
		</div>
		<div class="card__text">
			<span class="card__text--inner" data-splitting>FASHION</span>
		</div>
	</figure>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
<script src='https://unpkg.com/splitting/dist/splitting.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@400;700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #121013;
  display: grid;
  place-items: center;
}

.cards__wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}
.cards__wrapper .card {
  position: relative;
  width: 340px;
  height: 400px;
  margin: 3rem 5rem;
  pointer-events: none;
}
.cards__wrapper .card__image--wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: grayscale(0);
  transition: filter 0.5s ease;
}
.cards__wrapper .card__image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 0.5s ease, opacity 0.35s ease;
}
.cards__wrapper .card__image--outer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cards__wrapper .card__text {
  position: absolute;
  left: 0;
  bottom: 25%;
  transform: translateX(-8rem);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: difference;
}
.cards__wrapper .card__text--inner {
  display: inline-block;
  color: #fff;
  font-size: 5rem;
  font-family: "Red Rose", Roboto;
  font-weight: 700;
  overflow: hidden;
}
.cards__wrapper .card__text--inner .word {
  white-space: nowrap;
}
.cards__wrapper .card__text--inner .char {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transition-delay: calc(0ms + var(--char-index) * 20ms);
}
.cards__wrapper .card:hover .card__image {
  transform: scale(1);
}
.cards__wrapper .card:hover .card__text--inner .char {
  transform: translateY(0%);
}
.cards__wrapper:hover > .card:not(:hover) .card__image--wrapper {
  filter: grayscale(1);
}
.cards__wrapper:hover > .card:not(:hover) .card__image {
  opacity: 0.8;
}

.support {
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: #fff;
  font-size: 1.8rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale(1.1);
}

Recommandé

Modèle HTML CSS de carte de profil Neumorphic

Chargeur de jeu Unity WebGL Slope Plus

Arrière-plan animé de la matrice

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS