Webleb - Snippet di Codice -

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);
}

Consigliato

Un codice di junca

Un codice di Metehan

cambiare colore

HTML

CSS

JS

Consigliato

Un codice di junca

Un codice di Metehan

cambiare colore

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS