Digamos que tengo estas dos imágenes:

¿Cómo los combino como este, donde uno se desvanece gradualmente en el otro, usando solo CSS?

Necesito hacer esto usando CSS porque las imágenes son proporcionadas por el usuario.

Intenté usar gradientes CSS, múltiples imágenes de fondo y modos de fusión, pero no pude lograr lo que quería. Además, no pude encontrar lo que necesitaba buscando en Google.

2
Nathan Arthur 18 oct. 2017 a las 16:24

3 respuestas

La mejor respuesta

Aquí hay una solución usando la propiedad de máscara de imagen.

Escale la ventana del navegador para ver que las imágenes se desvanecen.

#Wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

#Left,
#Right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

#Left {
  left: 0;
  background: url('https://i.stack.imgur.com/kqa1P.jpg') top left no-repeat;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  background-size: contain;
}

#Right {
  right: 0;
  background: url('https://i.stack.imgur.com/UvGLY.jpg') top right no-repeat;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  background-size: contain;
}
<div id="Wrap">
  <div id="Left"></div>
  <div id="Right"></div>
</div>
2
DreamTeK 18 oct. 2017 a las 14:50

Solía opacity. Aquí hay una copia de trabajo. Espero que te ayude.

Prueba así:

#img1 {
position:relative;
}
#img2 {
position:absolute;
left:5px;
opacity:0.5;
}
<img src="https://i.stack.imgur.com/UvGLY.jpg" width="400" id="img1">
<img src="https://i.stack.imgur.com/kqa1P.jpg" width="200" id="img2">
0
nabanita 18 oct. 2017 a las 13:50

Te he hecho un ejemplo con fondos. posición relativa + ambos gradientes bgs. tal vez esto funciona con tus fotos

<body>
 <div style="position:relative">
  <div id="grad1">Image1asBG</div>
  <div id="grad2">Image2asBG</div>
 </div>
</body>

Css:

    #grad1 {
    position: absolute;
    height: 400px;
    width:100%;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

#grad2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width:100%;
    background: -webkit-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,2550,0,1), rgba(255,255,0,0)); /* Standard syntax (must be last) */
}

Violín: https://jsfiddle.net/d8v23w60/1/

0
Gabbax0r 18 oct. 2017 a las 13:37