Elke cover heeft een eigen div. Deze wordt net zo breed gemaakt als de afbeelding van de cover.
Om de div's naast elkaar te plaatsen, geven we ze een float: left
mee.
Ook enige marge is wel prettig om de covers uit elkaar te plaatsen.
(er zijn natuurlijk ook andere oplossingen te bedenken om de elementen naast elkaar te plaatsen).
De floatende elementen zitten elkaar nog een beetje in de weg ten gevolge van hun onderlinge verschillende hoogten.
Dat is hier eenvoudig op te lossen omdat het article
toch verborgen moet worden!
We geven de div's een hoogte precies gelijk aan de afbeeldingen. We zien dan direct dat het flaoten beter uitpakt.
De overbodige informatie treedt echter wel buiten de beperkte ruimte.
Ook dat is direct op te lossen door de div's een overflow: hidden
mee te geven.
Je ziet dan alleen de afbeeldingen.
We gaan nu proberen de inhoud een beetje over de afbeelding naar boven te 'trekken'.
Eerst geven we zowel de div
als het article
een position: relative
.
Daarna geven we het article een fikse negatief bovenmarge.
Als je ook de achtergrond deels transparant maakt, zie je de tekst over de afbeeldingen komen.
We proberen uit hoeveel negatieve marge er nodig is om de afbeelding helemaal te bedekken.
We maken de bovenmarge weer 0 en geven deze gevonden waarde juist aan de article in de div
waar de
muis boven komt. Daarvoor is de selector :hover
nodig.
Zonder de classnaam is dit iets als div:hover article
.
Wil je dit in dan in een overgang zien, dan geef je aan de oorspronkelijke div article
de
transition
eigenschap mee met de eigenschap margin-top
en de tijdsduur.