Hover one div and move it up with its content (<p>) - html

Question

Im trying to move a div up when you hover it and so far that works, but the tag inside stays in the same place and i need that it moves with the div. Do you have any suggestions how i can achieve this?
thanks for the help!
This is what i wrote so far:
css:
#probando img:hover {
top:-90px;
transition: top .30s;
}
#probando {
left:0;
right:0;
position: absolute;
z-index: 15;
top:40.5em;
}
#probando img {
max-width:280px;
position:relative;
top:-40px;
}
html
<div class="container" id="probando">
<div class="sixteen columns">
<div class="five columns" id="foto" >
<p id="galerie">Über uns</p>
<img src="../Img/ueberuns2.jpg" alt="Ueber uns" />
</div>
<div class="five columns" id="foto">
<p id="ueber">Galerie</p>
<img src="../Img/galerie.jpg" alt="Gallery" />
</div>
<div class="five columns" id="foto">
<p id="dj"> Djs</p>
<img src="../Img/dijcolor.jpg" alt="DJs" />
</div>
</div>
</div>

Answer 1

If i understand you correctly; your transition is only on the image tag, it has no child elements to take with it. If you move the transition to the containing div then it will move everything.
html: add a class that you can target for the transition.
<div class="container" id="probando">
<div class="sixteen columns">
<div class="five columns moveable" id="foto" >
<p id="galerie">Über uns</p>
<img src="../Img/ueberuns2.jpg" alt="Ueber uns" />
</div>
<div class="five columns moveable" id="foto">
<p id="ueber">Galerie</p>
<img src="../Img/galerie.jpg" alt="Gallery" />
</div>
<div class="five columns moveable" id="foto">
<p id="dj"> Djs</p>
<img src="../Img/dijcolor.jpg" alt="DJs" />
</div>
</div>
</div>
CSS: target the class instead:
#probando .moveable:hover {
top:-90px;
transition: top .90s;
}
#probando {
left:0;
right:0;
position: absolute;
z-index: 15;
top:10.5em;
}
#probando .moveable {
max-width:280px;
position:relative;
top:-40px;
}
https://jsfiddle.net/L12p8gj5/
You will just need to re-align your elements as needed.