Text animation when hovering over an image

Question

Here's an "intro page" I'm trying to set up: https://i.imgur.com/c1TgQDf.jpg

And I was thinking instead of having those three rows of text I could just make it so that when somebody hovers one of those three flags, above them a line fades in, depending on language (when hovering the mouse covers over the UK flag, the english line shows up, when hovering over the german flag, the german text shows up).

Here's what I tried so far (english part, the others are the same) :

.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;
} 

I borrowed the CSS from here: designshack.net/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste, it's the 3rd example, here's it in action: designshack.net/tutorialexamples/HoverEffects/Ex3.html

In there the text fades in downwards on blank space on the right of the image, while I want it to fade in upwards (horizontally centred on the page itself) above the three flags.

So far I can't really figure out how to make the text go above (I really am just a n00b), with the code above it just slides in some blank space under the flags, no text being shown...

Here's the html part: pastebin.com/NzRDmfiT

I didn't want to link to the page itself as I don't want to reveal the site yet. But if necessary, I could upload it somewhere so you would have an online copy to play with in the element inspector (or whatever it's called in other browsers).

Answer 1

You can achieve the desired behavior using 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);
    });
});

With the following 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>

And the following 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;
}