Hoe een afbeelding met CSS zonder dekking te vervagen?

Bedankt voor alle hulp, oplossing hieronder.

Ik ben nieuw bij webontwikkeling en ik probeer een website te herbouwen om mijn CSS te oefenen.

De website in vragen is http://www.divecarib.com . Als u naar beneden gaat naar de foto’s op die startpagina, merkt u dat ze “vervagen” op de hover. Hoe bereik ik dat fade? Dekking gebruiken, maakt de achtergrondafbeelding door, wat is niet hoe het op die website wordt geïmplementeerd.

Bedankt voor de hulp!

Hieronder is mijn fade-poging … de code niet opgenomen in originele post omdat ik dacht dat het irrelevant was gezien dat ik op het verkeerde pad was.

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }
   .fade:hover {
      opacity: 0.7;
      }

— Oplossing (tenminste hoe ik het deed – genomen van http://jsbin.com/igahay/1/edit?html, output) —–

   <div class=picSet>
            <figure class="tint">
                <p id="#p1">Student in training</p>
                <p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
                <img id=pic1  src="Media/pic1.jpg" />
            </figure>
    </div>

.tint {
    position: relative;
    float: left;
    margin: 3px;
    cursor: pointer;
}
.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 
}
.tint:hover:before {
    content: "";
    background: rgba(96,150,179, 0.54);
    border: 5px solid #0B689A;
    border-radius: 20px;
    margin: 3px;  
}
.tint p{
    position:absolute;
    top:20px;
    left:20px;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 0.75em;
    display: none;
    color: #0B689A;
}
 .tint:hover > p{
    display: block;
}

Antwoord 1, autoriteit 100%

Je kunt de ondoorzichtigheid van een element niet vervagen zonder dat de achterkant zichtbaar is.

De site waarnaar u linkt, vervaagt niet de dekking van de afbeelding, maar introduceert een doorschijnende laag over de bovenkant met de tekst erin.

Als je de afbeelding alleen wilt laten vervagen, maar de achtergrond niet wilt laten doorschijnen, kun je een wikkel rond de afbeelding plaatsen met een effen achtergrondkleur. Maar er is geen manier om een afbeelding te vervagen en niet te laten zien wat erachter zit.

.container {
     background:#FFF;
}
.container img:hover {
     opacity:0.8;
}