Comment fondu une image avec du CSS sans opacité?

Merci pour toute l'aide, solution ci-dessous.

Je suis nouvelle dans le développement web, et je suis en train de reconstruire un site web pour la pratique de mon CSS.

Le site en question est http://www.divecarib.com. Si vous faites défiler les photos sur cette page d'accueil, vous remarquerez qu'ils ont "fondu" sur le vol stationnaire. Comment puis-je réaliser que fade? À l'aide de l'opacité rend l'arrière-plan de l'image, ce qui n'est pas la façon dont il est mis en œuvre sur le site.

Merci pour l'aide!

Ci-dessous est mon fade tentative de...ne pas inclure le code dans le post original, parce que je pensais que c'était hors de propos étant donné que j'étais sur le mauvais chemin. 

.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;
      }

---Solution (au moins la façon dont je l'ai fait - pris de http://jsbin.com/igahay/1/edit?html,sortie)-----

    <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;
}
Il est attendu de vous que vous au moins essayer ce code pour vous-même. Un Débordement de pile n'est pas un code d'écriture de service. Je voudrais vous suggérer de faire quelques recherches supplémentaires, soit par Google ou par la recherche DONC, faire une tentative et. si vous avez encore des problèmes, et revenir avec ton code et expliquer ce que vous avez essayé et pourquoi il ne fonctionne pas.
Mais comme indice...ce n'est pas une opacité...c'est une couleur transparente superposition. Si vous recherchez Pile Overlflow pour le texte sur l'image, vous trouverez de nombreux de nombreux exemples...y compris la façon de rendre l'arrière-plan couleur partiellement transparent. stackoverflow.com/questions/806000/...
Merci c'est tout ce que je cherchais. Eu quelques difficultés à la recherche de la réponse, sans savoir ce que c'était en fait appelé.
Je devrais avoir été plus clair.
Merci de poster le code correspondant dans cette question, ou en ligne, dans un éditeur de code comme JSFiddle ou JS Bin afin de faire de débogage de collaboration facile. Ce sont les CSS, HTML et Javascript peut-être nécessaire de recréer l'image fade question.

OriginalL'auteur CZorio | 2016-02-28

  1. 7

    Vous ne pouvez pas appliquer un fondu à l'opacité d'un élément, sans avoir ce qui est derrière montrant à travers.

    Le site que vous avez associé n'est pas la décoloration de l'opacité de l'image, mais l'introduction d'une couche translucide sur le dessus avec le texte.

    Si vous voulez juste fondu de l'image, mais pas le fond, vous pourriez mettre un wrapper autour de l'image avec un fond uni de couleur. Mais il n'y a aucun moyen de fondu d'une image et pas ce qui est derrière.

    .container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}

    OriginalL'auteur Tom Kentell