0

Here's an "intro page" I'm trying to set up: https://i.stack.imgur.com/zOoox.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).

2

1 Answer 1

0

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;
}
6
  • Oh wow, that's very close, thank you very much! :) The only problem standing is that the language texts are in different rows. Is there any way of making them appear on the same row (same position on the page basically)?
    – andoru
    Mar 13, 2015 at 3:28
  • Here you go: jsfiddle.net/bmufcoec/3 did some further optimizations as well. There are still many things to improve, but the behavior should be like you expect. Hope you study this code and learn something from it, there were a lot of unnecessary CSS and HTML in you original one ;) I also edited my original answer to match the code in the fiddle. Mar 13, 2015 at 14:21
  • Yeah, in the past few weeks I've been running the codecademy courses on html/css, so this code should definitely help me learn more. Thanks for your help! :) And yes, it is close to how I envisioned, I'll do some more modifications later on. I'll also credit you and myself in the html comments ;) Let me know if you prefer any nickname, and if you'd like to have a site linked next to your name. Again, thanks a ton!
    – andoru
    Mar 13, 2015 at 15:30
  • Hm, after adding the code you provided, the text doesn't show up. Checked with W3C validation service, and gave me this: > there is no attribute "data-message". The jQuery is between <script> tags in the html file.
    – andoru
    Mar 13, 2015 at 17:34
  • data-* attributes were implemented on HTML5, take a look here: tinyurl.com/lpygkxh also, are you including the jQuery library before the script tag? Mar 13, 2015 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.