HTML/CSS - crear máscara alfa sobre imagen

Question

Me gustaría crear un efecto en un sitio que estoy construyendo donde una imagen está enmascarada por una superposición. La superposición debería crear un efecto de "fundido de salida": en realidad, no quiero nada animado, pero la superposición debería hacer que la imagen parezca desvanecerse hasta el color de fondo en los bordes.

Algo como esto: http://imgur.com/fqtc9.png

prefiero hacer esto con CSS/HTML/JS - no las imágenes. ¿Alguna idea de por dónde empezar? Gracias.

Answer 1

se podría hacer algo así por ejemplo: Example

html

<div class="photo_container"> 
     <div class="photo"> 
<img src="/lakenwoods/images/mockup-photo.png" width="540" height="463" /></div> 
     <div class="overlay"> 
      <div class="content"> 
       <h1>Welcome to Lake-N-Woods Realty</h1> 
       <p> 
       We are a Diverse and Highly Effective Real Estate Company, Dedicated to Satisfying all of our Clients Needs. We Specialize in Recreational, Rural and Investment Property throughout Bemidji and North Central Minnesota. 
       </p> 
       </div> 
     </div> 
     <div class="clear"> 
     </div> 
    </div> 

CSS

@charset "utf-8"; 
/* CSS Document */ 

.clear { 
    clear:both;  
} 

.photo_container { 
    position: relative; 
    width: 540px; 
    height: 463px; 
    overflow:hidden; 
    margin: 0; padding:0; 
} 

.photo_container .photo { 
    z-index:1; 

} 


.photo_container .overlay { 
    width: 540px; 
    height: 463px; 
    background: url(/lakenwoods/images/mockup-overlay.png) no-repeat top center; 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    z-index:10; 

} 

.photo_container .overlay .content h1 { 

    position:absolute; 
    top: 310px; 
    left: 34px; 
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif; 
    font-size:18px; 
    color: #fff; 
    font-weight: 700; 
    width: 315px; 

} 


.photo_container .overlay .content p { 


    position:absolute; 
    top: 335px; 
    left: 34px; 
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif; 
    font-size:12px; 
    color: #fff; 
    width: 315px; 
    line-height: 1.4em; 

} 

Answer 2

Comience con jQuery. Por ejemplo, vea la función fadeIn.

Por máscara estática alfa sobre la imagen bienes de uso opacidad css:

.myimage { 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

Answer 3

La función jQuery animate (con la opacidad) debe/puede ser capaz de manejar eso, aunque la respuesta de antyrat debería funcionar tan bien si simplemente fadeIn la superposición.

Answer 4

Ah, en función de tu comentario sobre la respuesta de antyrat, tu mejor opción es crear una imagen PNG que contenga el efecto (es decir, una forma blanca semitransparente) y colocarla sobre la imagen real usando CSS (position:absolute y z-index estarán involucrados).

Actualmente no puede crear formas no cuadradas utilizando solo HTML y CSS.

Answer 5

Sé que usted está solicitando específicamente una solución de CSS/JavaScript, y estoy seguro de que tiene sus razones.

Sin embargo, solo quería arrojar la solución simple de un solo archivo de imagen difuminado como el que ya ha publicado en su pregunta sin efectos especiales sofisticados.