Ik kom er even niet uit en heb wat hulp nodig van iemand die het vaker heeft gedaan.
Ik heb 6 afbeeldingen in 2 rijen van 3.
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" /></div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" /></div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" /></div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" /></div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" /></div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" /></div>Nu wil ik graag dat als ik over afbeelding 1 hover. Ik een hover krijg met een zwarte achtergrond met tekst welke volledig over alle 6 de afbeeldingen gaat.
Ik heb momenteel het volgende:
Dit vergroot alleen de huidige afbeelding en bij afbeelding 3 valt het helemaal buiten de container.
img:hover {
background-color:#FFF000;
width:900px;;
height:600px;
position:absolute;
z-index:1;
display:block;
}Wie weet hoe ik dit wel kan doen?
Ik dacht zelf aan een .overlay en die te activeren wanneer men hoverd over de images.