Beste leden,

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.
Is het niet makkelijker als je alles in een allesomvattende div zet en daar dan de hover op?
Goed punt heb ik ook aan gedacht, alleen moet ik per afbeelding een andere tekst weergeven, dan lukt niet als ik er 1 grote div omheen zet.


- 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?


En waar komt die tekst vandaan?
<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>

<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?


Alleen al voor de positionering zou zo'n container handig zijn want die kan dan altijd op dezelfde wijze.

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?
Heb je gelijk in om verder op je idee te borduren.

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
Ik denk dat je hoe dan ook wat JavaScript hulpstukken nodig zult hebben om dit op te lossen, dus dat is een mogelijkheid.
Bedankt voor het meedenken, ga het eens proberen.

Reageren