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 afbeeldingen 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:

<style>
.main-box{
	width:136px;
  	position:relative;  	
}
.main-box img{
	position:relative;
  	z-index:1;
}
.overlay p{ 
    text-align: center;
    margin-top: 35%;
}
.overlay{
	position: absolute;
    z-index: 2;
    top: 0;
    opacity: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    background-color: #2cbdec;
}
.main-box:hover .overlay{
	opacity:0.8;
}
</style>
<div class="main-box">
	<img src="/images/user1.jpg" alt="Afbeelding hover-overlay effect transparant maken met CSS" class="img-responsive">
  	<div class="overlay">
  		<p>Arthur is een held.</p>
  	</div>

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 */
}