将鼠标悬停在图片上方时显示文字动画 [英] Text animation when hovering over an image

问题描述

这是我要设置的介绍页面：
https：// i.imgur.com/c1TgQDf.jpg

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

我从这里借了CSS：designshack.net/articles/css/5 -cool-css-hover-effects-you-can-copy-and-paste，这是第三个例子，这是它的行动：designshack.net/tutorialexamples/HoverEffects/Ex3.html

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.

到目前为止，我真的不知道如何使文本上面（我真的只是一个n00b），上面的代码只是幻灯片在一些空白的旗帜下，没有文字正在显示...

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

这里是html部分：pastebin.com/NzRDmfiT

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).

推荐答案

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

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

使用以下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;
}

这篇关于将鼠标悬停在图片上方时显示文字动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！