Hover avatar inhoud

Hallo,

Op ons forum zijn wij bezig met een hover avatar en alles lukt, enkel hebben wij het probleem dat ook de tekst en het vakje dat erin staat ook doorzichtig wordt. Dit is natuurlijk niet de bedoeling, maar we vinden niet hoe we het kunnen verhelpen.

Zo ziet het eruit:
https://gyazo.com/a53ed3033d7ebdcb533508145160f58a
Zoals je ziet in de inhoud van de hover ook doorzichtig, hoe kunnen we dit verhelpen?

Alvast bedankt ^^

Hoi,

Ik vermoed dat je een van je parent elementen een doorzichtigheid hebt meegegeven. Hierdoor zijn alle hoger liggende elementen ook doorzichtig. Als je enkel een achtergrondkleur doorzichtig wilt hebben kan je beter rgba gebruiken in de plaats van hex/rgb/hsl. Als je een doorzichtige achtergrondfoto wilt zou je deze beter met css in een 'before' element steken.

Ik kan gerichtere info geven als ik het voorbeeld kan bekijken op je forum zelf zodat ik de html kan zien. Als je de url liever privé houdt mag je me die sturen in pm.

ik werk samen aan hetzelfde forum^^
hier is de link http://letskilltonight.actieforum.com/

En hier zijn de code:

Spoiler:

wil je ook de template code?

De template heb ik normaal gezien niet nodig.

Je kan eens proberen of het goed is als je deze css gebruikt:

Code:

.b {}
.c {height: 400px; width: 250px; position: relative; z-index: 0;}
.c:hover .d {opacity: 1;}
.d {opacity: 0; height: 400px; width: 250px; position: relative; z-index: 99; top: -400px; background-color: rgba(26, 26, 26, 0.5);
-webkit-transition: opacity 0.7s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in; transition: opacity 1s ease-in;}
#hoverblock:hover {opacity: 1;}
#words {opacity: 15;}

Yep dat werkte helemaal!
Thanks voor de snelle reactie!