web-dev-qa-db-fra.com

Comment estomper une image avec CSS sans opacité?

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

Je suis nouveau dans le développement Web et j'essaie de reconstruire un site Web pour pratiquer mon CSS.

Le site Web en questions est http://www.divecarib.com . Si vous faites défiler les images sur cette page d'accueil, vous remarquez qu'elles "s'estompent" au survol. Comment réaliser ce fondu? L'utilisation de l'opacité fait passer l'image d'arrière-plan, ce qui n'est pas la façon dont elle est mise en œuvre sur ce site Web.

Merci pour l'aide!

Ci-dessous, ma tentative de fondu ... n'a pas inclus le code dans le message d'origine parce que je pensais que cela n'était pas pertinent é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 comment je l'ai fait - tirée de 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;
}
cssimageopacityfade
9
CZorio

Vous ne pouvez pas estomper l'opacité d'un élément sans que ce qui se cache derrière ne transparaisse.

Le site auquel vous avez lié ne diminue pas l'opacité de l'image, mais introduit un calque translucide sur le dessus avec le texte.

Si vous souhaitez simplement estomper l'image, mais que l'arrière-plan n'est pas visible, vous pouvez placer un wrapper autour de l'image avec une couleur d'arrière-plan unie. Mais il n'y a aucun moyen de fondre une image et de ne pas montrer ce qui se cache derrière.

.container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}
7
Tom Kentell