Oké, vandaag had ik tijd.
Kijk eens op deze pagina, ik geloof dat het zo is hoe je het wil:
http://jelmerdemaat.nl/effect.htm.
Begrijp wel dat het een heel specifiek stukje code is, je kunt het niet zomaar op een webpagina gooien, wat dingetjes veranderen en verwachten dat het werkt. Bepaalde dingen moeten precies uitkomen. Je zult ook vast niet alles meteen begrijpen uit de broncode, daarom wat uitleg (ik probeer het kort):
Het is geen PHP, dat gebruik ik even voor de kleurtjes.
PHP:
//Voor de css (hou de HTML ernaast):
#nieuws{
width: 960px;
}
//De breedte van de het hele nieuws-div is gelijk aan die van alle plaatjes
//bij elkaar + eventuele margin of padding (nu dus 3 * (300 + 20)).
.plaatje {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
float: left;
margin: 0 10px;
}
//Elk van de drie nieuwsberichten staan in een aparte div, een vastgestelde
//grootte is belangrijk, evenals de positie (relative) en de overflow (hidden).
.plaatje img {
position: absolute;
top: 0; left: 0;
z-index: -99;
}
//De plaatjes in elk van de drie berichtjes moeten deze positie en een heel
//lage z-index hebben, dan weet je zeker dat ze helemaal linksboven onder
//de tekst komen.
.plaatje .tekst{
color: white;
width: 100%;
height: 110px;
overflow: hidden;
position: absolute;
top: 170px;
background: black;
}
//De tekst moet je zelf nog wel stylen, alleen de positie is weer belangrijk,
//want de top geeft aan hoever de tekst naar beneden moet schuiven als
//er niets gebeurt. Hoogte en kleur en achtergrond enzo mag je zelf verzinnen.
.plaatje .tekst h3{
font-size: 19px;
margin: 0 0 5px 0;
padding: 2px 2px 5px 2px;
border-bottom: 1px solid white;
}
.plaatje .tekst p{
margin: 2px; padding: 0;
}
//Hier kan je de paragraph en de titel nog stylen, ik heb wat margin en padding
//en een lijn onder de titel.
Ik hoop dat je al wat van CSS wist, anders is dit misschien hocus pocus voor je! Je wilt misschien de achtergrond nog transparant? Dat is nog wel ingewikkelder. Als je namelijk
opacity: 0.5 zou doen, wordt de tekst ook transparant. Je kunt dus een transparante achtergrond aan de div.tekst geven, maar Internet Explorer 6 ondersteunt dat niet, moet je daarvoor weer een hack zoeken... enz.
(Overigens weet ik niet hoeveel mensen met IE6 je website bezoeken, maar ik zou zeggen: pech voor hen dan maar, IE6 is zó oud.)
Je kunt ook eerst een andere div toevoegen, daarvan transparante achtergrond zetten, en dan pas div.tekst neerzetten, maar dat wordt ook wel ingewikkeld voor nu.
jQuery Javascript:
HTML:
$(function(){
$('.plaatje').hover(function() {
$(this).children('.tekst').stop().animate({ "top" : '90px'}, 400);
}, function() {
$(this).children('.tekst').stop().animate({ "top" : '170px'}, 400);
});
});
Per regel zegt dit: (1) als het document klaar is met laden (2) en als div.plaatje gehoverd wordt ("mouseover" dus) dan (3) neem je zijn div.tekst en animeer hem naar boven, tot 90px van de top af. (4) Als je muis er weer af is ("mouseout" dus) dan (5) zet je hem weer terug naar 170px van de top af naar beneden. Regel 6 en 7 is afsluiting, logisch.
Dit is gemaakt met jQuery, die ene javascript library, omdat dit veel minder werk is, en het is vrij simpel zo. Om dit te laten werken
moet je dus wel jQuery in je HTML toevoegen, zoals dat in de head staat:
PHP:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
Oh, en je kunt in je HTML zelf natuurlijk een link toevoegen in de tekst.
Zo, begrijp je het zo een beetje?
Als het niet zo is: roep maar meteen!
Groeten,
Jelly
), want deze zet de text ook daadwerkelijk 'op' het goede plaatje.
) dus dat kan morgen/woensdag pas.
maar hoe kun je het beste dan een pagina opbouwen 
