HTML/CSS - crea maschera alfa sull'immagine

Question

Mi piacerebbe creare un effetto in un sito che sto costruendo dove un'immagine è mascherata da una sovrapposizione. La sovrapposizione dovrebbe creare un effetto "dissolvenza" - in realtà non voglio niente animato, ma l'overlay dovrebbe far sembrare l'immagine come se stesse sbiadendo al colore di sfondo ai bordi.

Qualcosa di simile a questo: http://imgur.com/fqtc9.png

preferisco farlo con i CSS/HTML/JS - non immagini. Qualche idea su dove cominciare? Grazie.

Answer 1

si potrebbe fare qualcosa di simile, per esempio: 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

Inizia con jQuery. Ad esempio, vedere la funzione fadeIn.

Per maschera statica alfa sull'immagine proprietà utilizzo opacità css:

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

Answer 3

La funzione jQuery animate (con opacità) dovrebbe/potrebbe essere in grado di gestire questo, anche se la risposta di antyrat dovrebbe funzionare così se semplicemente FadeIn la sovrapposizione.

Answer 4

Ah - in base al tuo commento sulla risposta di antyrat, la soluzione migliore è creare un'immagine PNG che contenga l'effetto (ad esempio una forma bianca semitrasparente) e posizionarla sopra l'immagine attuale utilizzando CSS (position:absolute e z-index saranno coinvolti).

Attualmente non è possibile creare forme non quadrate utilizzando solo HTML e CSS.

Answer 5

So che stai chiedendo specificamente una soluzione CSS/JavaScript, e sono sicuro che hai le tue ragioni.

Tuttavia, volevo solo eliminare la semplice soluzione di un singolo file immagine sbiadito come già inserito nella domanda senza effetti di fantasia.