将一个 div 悬停并向上移动其内容 (<p>)

Question

我试图在悬停 div 时向上移动它，到目前为止它是有效的，但是里面的

标签保持在同一个位置，我需要它随着 div。你对我如何实现这一点有什么建议吗？
感谢您的帮助！

这是我到目前为止写的：

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>

                                <a href="Ueberuns.html"><img src="../Img/ueberuns2.jpg" alt="Ueber uns" /></a>
                            </div>
                            <div class="five columns" id="foto">
                                <p id="ueber">Galerie</p> 
                                <a href="galerie.html"><img src="../Img/galerie.jpg" alt="Gallery"  /></a>
                            </div>
                            <div class="five columns" id="foto">
                                <p id="dj"> Djs</p>
                                <a href="Djs.html"><img src="../Img/dijcolor.jpg" alt="DJs"   /></a>
                            </div>
                        </div>
            </div>

Answer 1

如果我没理解错的话；您的过渡仅在图像标签上，它没有可带的子元素。如果您将过渡移动到包含 div 的位置，那么它将移动所有内容。

html：添加一个 class 可以作为转换的目标。

<div class="container" id="probando">
                        <div class="sixteen columns">
                            <div class="five columns moveable" id="foto" >

                                <p id="galerie">Über uns</p>

                                <a href="Ueberuns.html"><img src="../Img/ueberuns2.jpg" alt="Ueber uns" /></a>
                            </div>
                            <div class="five columns moveable" id="foto">
                                <p id="ueber">Galerie</p> 
                                <a href="galerie.html"><img src="../Img/galerie.jpg" alt="Gallery"  /></a>
                            </div>
                            <div class="five columns moveable" id="foto">
                                <p id="dj"> Djs</p>
                                <a href="Djs.html"><img src="../Img/dijcolor.jpg" alt="DJs"   /></a>
                            </div>
                        </div>
            </div>

CSS：将 class 作为目标：

#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/

您只需根据需要重新对齐您的元素。

将一个 div 悬停并向上移动其内容 (<p>)

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

html

css

hover