Tekst over afbeelding bij :hover

[Crazz]

Hallo,

ik ben bezig met het maken van een eigen online portfolio met foto's. Een vrij eenvoudige site met op de startpagina vier div's met afbeeldingen (2 naast elkaar en onder elkaar, responsive, dus op kleinere schermen alles onder elkaar). Die linken door naar mijn vier hoofdthema's op andere pagina's. Nu heb ik in elke div een afbeelding, die ook een link is, en wil wanneer je hovert ook een tekst in de afbeelding laten zien. Wat me niet lukt is om de tekst, zonder dat deze van invloed is op de grootte of positie van de div, op de afbeelding te laten zien. Alleen de eerste afbeelding heeft nu een <p> element voor de tekst in de html hieronder overigens, als voorbeeld.

Dit is de relevante html:
<div id="main">
<div class="frontpageimage"><a href="https://website/macro.html"><p class="imgoverlay">macro</p><img src="images/macro_1.jpg" alt=""></img></a></div>
<div class="frontpageimage"><a href="https://website/landscape.html"><img src="images/landscape_1.jpg" alt=""></img></a></div>
<div class="frontpageimage"><a href="https://website/architecture.html"><img src="images/architecture_1.jpg" alt=""></img></a></div>
<div class="frontpageimage"><a href="https://website/free.html"><img src="images/free_1.jpg" alt=""></img></a></div>
</div>

En de CSS:
#main{
float: left;
display: block;
text-align: center;
height: auto;
max-width: 100%;
justify-content: center;
margin-bottom: 20px;
}

.frontpageimage{
display: inline-block;
max-width: 45%;
height: auto;
margin: 0 15px 15px 15px;
}

.frontpageimage img {
display: block; /*to make sure the image stretches down instead of behaving
like text (with room for letters such as g, j and q)*/
max-width: 100%;
height: auto;
}

.imgoverlay{
position: relative;
color: #fff;
display: none;
}

a:hover .imgoverlay{
position: relative;
display: inline;
}

Het resultaat is echter dat de div bij :hover helemaal naar beneden wordt gedrukt en dus uit het grid verdwijnt. En de tekst komt niet op de afbeelding maar eronder of (bij een andere positioning) erboven.
Wat doe ik fout?


Cheers!

[Ed Vertijsment]

Format even je code want dit is niet te lezen...

Om content vrij te positioneren (onafhankelijk van de page flow) gebruik je positioning, position: absolute; is wat je hier wilt gebruiken. Absolute positionering stelt je in staat coördinaten op te geven t.o.p. van eerste "gepositioneerde" parent (iets met een position attribute) of anders de body.

Ik heb even een voorbeeld gebakken, dit laat zien hoe je kan positioneren met absolute positioning en kan tonen op een hover: https://jsfiddle.net/0j1baqvb/4/

[TI_Observer]

Ik zou het met pseudo elements oplossen (::before)

dus:

.parent {
position: relative;
&:hover::before {
content: 'text';
position: absolute;
}
}

[Ed Vertijsment]

sheez88 schreef op zondag 4 juni 2017 @ 11:51:
Ik zou het met pseudo elements oplossen (::before)

dus:

.parent {
position: relative;
&:hover::before {
content: 'text';
position: absolute;
}
}

Het "nadeel" hiervan is dan wel weer dat de tekst niet te selecteren valt. Daarnaast vind ik de code er minder elegant uitzien.

Neemt niet weg dat hiervoor hele goede use cases zijn en :before ,:after goed kunnen gebruiken is zeker iets wat je wilt beheersen.

[TI_Observer]

Ed Vertijsment schreef op zondag 4 juni 2017 @ 11:54:
[...]


Het "nadeel" hiervan is dan wel weer dat de tekst niet te selecteren valt. Daarnaast vind ik het er minder elegant uitzien.

Neemt niet weg dat hiervoor hele goede use cases zijn en :before ,:after goed kunnen gebruiken is zeker iets wat je wilt beheersen.

Hij zegt dat ie een simpele site aan het maken is. Gaat hij die teksten dynamische inladen met php of javascript bijv, dan is mijn oplossing inderdaad niet de beste.

[Crazz]

Geen inladen met php of js, het is zo kleinschalig dat ik eenvoudig alles zelf kan beheren. Aanpassing is inmiddels gelukt trouwens met de oplossing van Ed. Probleem was voornamelijk dat ik de div waarin de foto's zitten niet op position:relative had gezet. En ik ga zeker ook even in de :before en :after elements duiken.

Bedankt!