Ik doe een transition
waar 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 transition
bevat, 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 span
element 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%
.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 white
is. 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 1
terwijl u de transparantie van de afbeelding wijzigt in .2
of wat u maar wilt.