Afbeelding hover-overlay tekst effect transparant maken met CSS

Logo cursus traing wordpress

Afbeelding hover-overlay tekst effect transparant maken met CSS

Afbeelding hover-overlay effect transparant maken met CSS

In deze tutorial leer je hoe je een afbeelding hover overlay effect transparant maakt met CSS. Het korte antwoord is: gebruik de CSS-eigenschap positie en z-index om een overlay toe te voegen aan de afbeelding bij hover.

Aan de hand van de onderstaande voorbeelden kun je zien hoe je div-elementen op enkele of meerdere kunt laten overlappen om deze weer te geven wanneer je met de muis over de afbeelding beweegt.

Hoe maak je een transparante overlay van een afbeelding met de muisaanwijzer met CSS

Het onderstaande voorbeeld bevat een afbeelding en div-inhoud om over de afbeelding heen te leggen. Je moet de position propery gebruiken met waarden position:relative voor de afbeelding en position:absolute voor de overlay div tekstinhoud.

Je moet ook z-index:1 gebruiken voor de afbeelding en z-index:2 om het div-element over een afbeelding te leggen, zoals hieronder is aangegeven:


"Afbeelding

Arthur is een held.

Transparantie afbeeldingen bij Hover

Je kunt de opaciteit van afbeeldingen instellen op basis van hun status door de CSS eigenschap opacity te combineren met de selector :hover.
Zodra u de muiscursor over de afbeeldingen beweegt, krijgen de afbeeldingen de hoogste waarde van ondoorzichtigheid.

Stel de CSS-ondoorzichtigheid in voor HTML-elementen zoals afbeeldingen en tekstvakken door dit in je CSS te plaatsen:

img {
   opacity: 0.3;
   filter: alpha(opacity=30); /* This is for IE8 and other earlier browsers */
}

img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100); /* This is for IE8 and other earlier browsers */
}

Meer weten over Afbeelding hover-overlay tekst effect transparant maken met CSSof info?

Wil je meer weten? Veel cursisten met interesse in Afbeelding hover-overlay tekst effect transparant maken met CSS bekeken ook de onderstaande handleidingen en artikelen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Afbeelding hover-overlay tekst effect transparant maken met CSS?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Afbeelding hover-overlay tekst effect transparant maken met CSS en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven