CSS-overgangsdekking Fade-achtergrond

Ik doe een transitionwaar het vervaagt in transparant wit, wanneer een gebruiker een afbeelding zweeft.

Mijn probleem is dat ik de kleur moet veranderen, die het vervaagt tot, zwart. Ik heb geprobeerd gewoon eenvoudig toe te voegen background:black;aan de klasse die de transitionbevat, maar het werkt niet ongeschikt, het is nog steeds vervagen in wit transparant.

De CSS-code die ik gebruik is:

.hover:hover {
  opacity: 0.2;
}
.item-fade {
  background: black;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />

Antwoord 1, Autoriteit 100%

Wikkel uw afbeelding met een spanelement met een zwarte achtergrond.

.img-wrapper {
  display: inline-block;
  background: #000;
}
.item-fade {
  vertical-align: top;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  opacity: 1;
}
.item-fade:hover {
  opacity: 0.2;
}
<span class="img-wrapper">
   <img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>

Antwoord 2, autoriteit 6%

Het vervaagt niet naar ‘zwart transparant’ of ‘wit transparant’. Het laat alleen de kleur zien die zich “achter” de afbeelding bevindt, wat nietde achtergrondkleur van de afbeelding is – die kleur wordt volledig verborgen door de afbeelding.

Als je naar zwart (ish) wilt vervagen, heb je een zwarte container rond de afbeelding nodig. Iets als:

.ctr {
    margin: 0; 
    padding: 0;
    background-color: black;
    display: inline-block;
}

en

<div class="ctr"><img ... /></div>

Antwoord 3, autoriteit 6%

http://jsfiddle.net/6xJQq/13/

.container {
    display: inline-block;
    padding: 5px; /*included padding to see background when img apacity is 100%*/
    background-color: black;
    opacity: 1;
}
.container:hover {
    background-color: red;
}
img {
    opacity: 1;
}
img:hover {
    opacity: 0.7;
}
.transition {
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s  ease-in-out;
}

Antwoord 4

Houd er rekening mee dat het probleem niet de kleur whiteis. Het is omdat het transparant is.

Wanneer een element transparant wordt gemaakt, alle ondoorzichtigheid van het onderliggende element; alpha-filter in IE 6 7 etc, wordt gewijzigd in de nieuwe waarde.

Je kunt dus niet zeggen dat het wit is!

U kunt er een element boven plaatsen en de transparantie van dat element wijzigen in 1terwijl u de transparantie van de afbeelding wijzigt in .2of wat u maar wilt.

Other episodes