Afbeelding in elkaar laten schuiven

Hi,

Ik wil dat als ik over mijn afbeelding ga, dat er een balkje van onder en een groter vak van boven over de afbeelding schuiven.

Maar hoe moet dit?

Ik wil als ik eroverheen ga, dat het blijft staan, maar zodra de muis eraf is weer rustig terug gaat, naar het plaatje. Ook moet er tekst op het balkje, en het grote vak komen, en los van elkaar.

Ik had dit

<div id="showcaseitems">
        <div class="item">
                <div class="up">
                    <h3>PatrickDesign.nl</h3>
                    <p>Klein beetje info</p>
                </div>
                <div class="down">
                    <a href="#">Bekijk ontwerp</a>
        </div>
                </div>
                </div>

Maar verder kom ik niet.

Alvast bedankt.

Groet,

Patrick

Heb je een voorbeeld van wat je wilt? Ik begrijp het niet.

Ik heb geen voorbeeld.

Ik zal even kijken of ik snel wat kan maken.
toevoeging op 3 september 2011, 10:31:19:
toevoeging op 3 september 2011, 10:31:45:
Zo moet het gaan.

Oh zo, ik snap het, even kijken..
//ik heb het bij zon wordpress theme, even uploaden

Misschien heb je hier wat aan?

http://w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

<script>
function slide()
{
    
    $(#boven).slideDown(slow);
    $(#onder).slideDown(slow);

}

function deSlide()
{
    
    $(#boven).slideUp(slow);
    $(#onder).slideUp(slow);

}
</script>

<div onmouseover="slide();" onmouseout="deSlide();">
    <div id="boven" style="position: absolute; background: #000; display: none;">
        tekst hiero
    </div>
    
    <div id="onder" style="position: absolute; background: #666; display: none;">
        tekst hiero
     </div>
    
    lalalalaa
</div>

Zoiets?

Werkt niet.

je moet jQuery ook include he?

Ja, dat heb ik.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function slide()
{
    
    $(#boven).slideDown(slow);
    $(#onder).slideDown(slow);

}

function deSlide()
{
    
    $(#boven).slideUp(slow);
    $(#onder).slideUp(slow);

}
</script>

<div onmouseover="slide();" onmouseout="deSlide();">
    <div id="boven" style="position: absolute; background: #000; display: none;">
        tekst hiero
    </div>
    
    <div id="onder" style="position: absolute; background: #666; display: none;">
        tekst hiero
     </div>
    
    lalalalaa
</div>

Dat had ie al..

van

De oplossing heb ik net gevonden, met hulp van shahiem