Hover met een fixed position
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.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<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.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
img:hover {
background-color:#FFF000;
width:900px;;
height:600px;
position:absolute;
z-index:1;
display:block;
}
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.
Gewijzigd op 08/03/2016 12:06:50 door Jan Graneker
- SanThe - op 08/03/2016 12:40:07:
Is het niet makkelijker als je alles in een allesomvattende div zet en daar dan de hover op?
<div class="text"><p>lorum ipsum</p></div>
</div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" />
<div class="text"><p>lorum ipsum</p></div>
</div>
<div class="col-xs-6 col-md-4"><img src="images/home/.jpg" alt="" />
<div class="text"><p>lorum ipsum</p></div>
</div>
- SanThe - op 08/03/2016 12:47:53:
En waar komt die tekst vandaan?
Daarnaast, als je over een afbeelding hovered, en je zet hier dan een (vergrote) afbeelding overheen, ben je dan niet meteen je "hoverfocus" kwijt? Plus je zou dan met je muis uit de container moeten bewegen om de uitvergrote afbeelding te laten verdwijnen en de andere afbeeldingen weer te kunnen zien?
Als ik er nou een div omheen maak dat word dan de overlay. Deze zet ik op hide, als je vervolgens op 1 van de 6 afbeeldingen klikt(javascript), dan verschijnt de overlay (show). Door op 1 van de 6 afbeeldingen te klikken kan ik ook zorgen dat hij de tekst moet pakken die bij die afbeelding hoort.
Wat zeggen jullie ervan