Image hover met textblok

[AIRDiensten]

ik weet niet of ik hier juist zit maar ik ben op zoek naar een manier om een over een image een blok met text schuiven zoals deze ook te zien is op DEZE website.
Het gaat om het deel onderaan bij Featured News.

Heeft iemand een idee hoe dit je maken is?
ik had al geprobeerd om de bron te pakken in de html echter werkte deze niet echt lekker

 

[jarco]

Hoi,

Dit gebeurt met css en javascript.
Met css word tekst die eronder staat alvast naar boven gezet. margin-top: negatief maken.
Je kan dan met javascript (jquery is hier IDEAAL voor in dit geval) Als je jquery gaat gebruiken kijk je best naar de functie Animate. http://api.jquery.com/animate/

edit: Ik heb rap rap (5 minuutjes) een voorbeeldje gemaakt: http://jsfiddle.net/n2m6P/

Dit is de eerste keer dat ik zoiets maak en ik heb niet echt opgezocht hoe het moet dus er zullen wel beter manieren zijn om het te doen. Voorlopig kan je hier al meer verder denk ik om het in jouw situatie in te passen.

edit2: ik zie net dat in je voorbeeld er eigenlijk een ander vak er over staat. Dit werkt ongeveer hetzelfde. Je kan het 2de vak gewoon een grotere z index geven.

 

[lucky1]

Ik heb dit voor een klant ook moeten doen.
Met de volgende code heb ik het opgelost:

<div class="web-header-product-' . ($k + 1) . '" onmouseover="javascript: $(\'div#web-header-product-' . ($k + 1) . '-text\').fadeIn(400);" onmouseout="javascript: $(\'div.web-header-product-text\').fadeOut();">

Dit is met jQuery opgelost.
Vooraf gaande uiteraard een MySQL query om de juiste producten op te halen, en deze in een foreach lus geplaatst.

Met de volgende CSS code toegevoegd.

div.web-header-product-text
{
	width: 310px;
	height: 40px;

	position: absolute;
	top: 190px;
	left: 0px;

	background-color: #000000;

	text-align: center;
	white-space: nowrap;

	font-size: 13px;
	color: #FFFFFF;

	padding-top: 3px;

	display: none;

<?php

if(in_array(BROWSER_CODE, array('msie6', 'msie7', 'msie8')))
{
	echo 'filter:alpha(opacity=65);';
}
else
{
	echo 'opacity:0.65;';
}

?>
}

 

[Tha Devil]

PHP in je CSS is niet echt netjes, dan kun je beter gebruik maken van een conditionele comment met apart stylesheet voor IE-fixes.

In bovenstaand geval is het zelfs niet eens nodig want andere browsers zullen de filter eigenschap negeren.