Mousover tekst over afbeelding

Status
Niet open voor verdere reacties.
Oke, stel dat je dus de afmetingen naar 144x95 wil veranderen, dan moet je dus het volgende aanpassen:

Code: 
.plaatje {
    width: [B]144px[/B];
    height: [B]95px[/B];
    }

.plaatje .tekst{
    height: 110px; (Andere teksthoogte mag, hoeft niet)
    top: [B]65px[/B]; (Dit is dus hoever de tekst standaard (stil)staat vanaf de top. Kan ook iets anders zijn, als het maar minder is dan 95.)
    }
Bij Javascript:

Code: 
$(function(){
        $('.plaatje').hover(function() {
            $(this).children('.tekst').stop().animate({ "top" : '[B]30px[/B]'}, 400);       (Hoever moet tekst vanaf top omhoog)
        }, function() {
            $(this).children('.tekst').stop().animate({ "top" : '[B]65px[/B]'}, 400);       (Dus evenveel als bij .tekst)
        });
});

Is het een beetje begrijpelijk? Zie uitleg bij de code. ;)
Zo zou het ongeveer moeten lukken.
De link die je noemt zie ik even niet? :confused:

Grt. Jelly
 
Oké, voor die pagina kan je dus de getallen aanpast in de CSS en het javascript zoals ik aangaf.
 
Is het al gelukt? Je bericht gaf aan van niet...
 
Jelly zei:
Is het al gelukt? Je bericht gaf aan van niet...
Klik om te vergroten...

hee jelly,

nee het wil nog niet lukken. zodra ik de afmetingen aanpas loopt het schuiven niet meer goed. (De slide).

Zou jij hem voor mij willen aanpassen?

groeten jurre
 
Hier de juiste code als het goed is:


PHP: 
<head>
	<title>Test1</title>
	<style type="text/css">
	#nieuws{
	width: 960px;
	}
 
	.plaatje {
	width: 300px;
	height: 200px;
	position: relative;
	overflow: hidden;
	float: left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
	}
 
	.plaatje img {
	position: absolute;
	top: 0; left: 0;
	z-index: -99;
	}
	
	.plaatje .tekst{
	color: white;
	width: 100%;
	height: 110px;
	overflow: hidden;
	position: absolute;
	top: 170px;
	background: black;
	background-color: #333333;
	border-top-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	}
	
	.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;
	}
	
	</style>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	$(function(){
        $('.plaatje').hover(function() {
            $(this).children('.tekst').stop().animate({ "top" : '90px'}, 400);   
        }, function() {
            $(this).children('.tekst').stop().animate({ "top" : '170px'}, 400);       
        });
	});
	</script>
</head>
<body>
<div id="nieuws">
	    <div class="plaatje">
	    <img src="slidenews/tumbtest1.jpg" alt="Rallyfoto" width="300" height="200" />
			<div class="tekst">
				<h3>Foto's Sezoens Rally 09</h3>
				<p>Tekst over rally. Consectetur adipiscing elit.
				Praesent lorem urna, accumsan consectetur interdum vel.</p>
			</div>
	  </div>
</div>
</body>
</html>
 
 
</body>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan