effet de révélation

1511 alqsdeus

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 August 2024

Formulaire d'idée

30 August 2024

Animations pilotées par défilement Détection de défilement

28 August 2025

Studio d'architecture et de design : Design moderne et durable

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #305271, #99b5f0);
  font-family: 'Poppins', sans-serif;

.container {
  position: relative;
  width: 80%;
  max-width: 1000px;
  height: 600px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.container:hover {
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6);
  transform: scale(1.02);
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(85%);
  transition: filter 0.3s ease-in-out;
}

.second-image {
  width: 50%;
  overflow: hidden;
  transition: width 0.5s ease-in-out;
}

#slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(6px);
  cursor: ew-resize;
  transition: left 0.3s ease;
  z-index: 3;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slider:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
  background-size: 150px 150px;
  opacity: 0.2; 
  animation: moveStars 25s linear infinite;
  z-index: 1;
}

.image-wrapper img:hover {
  filter: brightness(100%);
}

@keyframes moveStars {
  from {
      background-position: 0 0;
  }
  to {
      background-position: 100% 100%;
  }
}}

Recommandé

Formulaire d'idée

Animations pilotées par défilement Détection de défilement

Studio d'architecture et de design : Design moderne et durable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS