懸停在圖像上時的文本動畫

Question

這是我要設置的“簡介頁”： https : //i.imgur.com/c1TgQDf.jpg

我當時在思考，而不是擁有那三行文本，我可以這樣做，以便當有人將這三個標志中的一個懸停在上面時，根據語言（在將鼠標蓋懸停在UK標志上時，懸停在德國國旗上時，顯示德語行）。

這是我到目前為止嘗試過的內容（英語部分，其他部分相同）：

.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-可以復制並粘貼，這是第三個示例，下面是實際操作：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;
}