悬停在图像上时的文本动画

Question

这是我正在尝试设置的“介绍页面”： https://i.imgur.com/c1TgQDf.jpg

而且我在想，我可以不使用那三行文本，而是这样当有人悬停在这三个标志中的一个时，它们上方会淡入一条线，具体取决于语言（将鼠标悬停在英国上空时） flag，显示英文行，当悬停在德国国旗上时，显示德语文本。

这是我到目前为止尝试过的（英文部分，其他部分相同）：

.en {
        text-align: center-top;
        line-height: 0px; 
        color: transparent; 
        font-size: 30px; 
        -webkit-transition: all 0.5s ease; 
        -moz-transition: all 0.5s ease; 
        -o-transition: all 0.5s ease; } 

.en:hover { 
        line-height: 133px; 
        color: #e0e0e0; 
} 

.en img {
        padding-right:20px;
} 

我从这里借用了 CSS：designshack.net/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste，这是第三个示例，下面是实际操作：designshack。 net/tutorialexamples/HoverEffects/Ex3.html

在那里，文本在图像右侧的空白处向下淡入，而我希望它在三个标志上方向上淡入（水平居中于页面本身）。

到目前为止，我真的不知道如何让文字出现在上面（我真的只是一个 n00b），上面的代码只是在标志下的一些空白处滑动，没有显示任何文字......

这是 html 部分：pastebin.com/NzRDmfiT

我不想链接到页面本身，因为我还不想透露该网站。但是如果有必要，我可以将它上传到某个地方，这样您就可以在元素检查器中使用在线副本（或在其他浏览器中调用的任何内容）。

Answer 1

您可以使用 jQuery 实现所需的行为：

$(function(){
    $("#flags a").stop().hover(function(){
        $( $(this).data("message") ).animate({
            opacity: 1,
            lineHeight: "+20px"
        }, 1000);
    },function(){
        $( $(this).stop().data("message") ).animate({
            opacity: 0,
            lineHeight: "-20px"
        }, 1000);
    });
});

使用以下 HTML

<div id="content">

    <div id="logo">
        <img src="http://vengefulchip.tk/playground/logo.png" alt="Alternative text for the image">
    </div>

    <p id="de">Willkommen auf Stefans Gallery, klicken Sie auf, um die Deutsch Version der Website fortfahren.</p>
    <p id="ro">Bine ati venit la Stefan's Gallery, dati click pentru a continua pe varianta in romana a site-ului.</p>
    <p id="en">Welcome to Stefan's Gallery, click to proceed to the english version of the site.</p>

    <div id="flags">
        <a href="./de/" data-message="#de"><img src="http://vengefulchip.tk/playground/de.png" /></a>
        <a href="./ro/" data-message="#ro"><img src="http://vengefulchip.tk/playground/ro.png" /></a>
        <a href="./en/" data-message="#en"><img src="http://vengefulchip.tk/playground/en.png" /></a>
    </div>

</div>

还有下面的 CSS

body {
    background-image: url('http://vengefulchip.tk/playground/pattern.jpg');
    background-position: center center;
    background-attachment: fixed;
}

#content {
    position: relative;
    background: rgba(25, 25, 25, .5);
    border: 2px dashed rgba(45, 45, 45, .8);
    padding-top: 25px; 
    padding-bottom: 50px;
    margin-left: 10%;
    margin-right: 12%;
    margin-top: 2%;
    margin-bottom: 2%;  
}

#logo {
    text-align: center;
    margin-bottom: 40px;
}

#de, #ro, #en {
    position: relative;
    font-size: 25px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300;
    color: #e0e0e0;
    line-height: 0;
    text-align: center;
    opacity: 0;
    width: 50%;
    height: 20px;
    margin: 10px auto;
}

#ro {
    top: -30px;
}

#en {
    top: -60px;
}

#flags {
    position: relative;
    margin: 10px auto;
    width: 365px;
}