0
132
VistasDesenfoque progresivo lineal en una imagen
Estoy tratando de desenfocar lineal y progresivamente una imagen. No he encontrado ningún recurso sobre esto en línea, o tal vez simplemente no tengo idea de qué buscar. ¿Alguien podría proporcionarme un recurso similar o un término de búsqueda para que pueda encontrar los tutoriales o plantillas para esto, si existe?
Imagen para ilustración:
Cualquier ayuda sería apreciada, ¡gracias!
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Prueba esto:
figure { position: relative; } figure::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85)); } <figure> <img width="50%" src="https://placekitten.com/640/360" alt=""> </figure>Y puede cambiar el canal alfa en el color blanco según lo necesite.
·
Juan Pablo Isaza
Denunciar
0
Podrías usar un degradado que vaya de transparente a blanco como este:
#fade { transform: translate(0, -100px); position: absolute; width: 100%; height: 100px; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); } <body> <h1>Headline</h1> <div id="text"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <div id="fade"></div> <h1>Next things</h1> </div> </body>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta