efecto revelador

1288 alqsdeus

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

11 July 2024

Efecto brillante de neón

9 September 2023

Efecto de desplazamiento del botón con CSS

20 June 2025

Formulario de registro de inicio de sesión HTML con efecto de tarjeta 3D

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

Recomendado

Efecto brillante de neón

Efecto de desplazamiento del botón con CSS

Formulario de registro de inicio de sesión HTML con efecto de tarjeta 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS