effet de révélation

2,819 alqsdeus

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

16 January 2026

Intégration de jeu Flash avec Ruffle Player

30 December 2024

Un code par cleancloud199

15 January 2026

Canvas de jeu HTML5 avec Construct 2 Runtime

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