css - 悬停时的文本动画 [第 2 部分]

Question

以前问过here寻求有关将鼠标悬停在图像上时某些文本淡入淡出的帮助，因为我无法弄清楚如何使文本 float 在图像上方。

现在我已经自己弄明白了，但我仍然对文本本身有问题。

您可以看到页面的实时版本here .

它目前所做的是将每种语言的每个句子放在不同的行中。我想要它做的是在页面上的特定点( Logo 下方和标志上方)显示所有行

似乎当我将鼠标悬停在句子所在的位置时，它们会淡入，而我希望只有在将鼠标悬停在旗帜上时才会发生这种情况。

#en { 
    height: 150px;
    line-height: 0px; 
    color: transparent; 
    font-size: 25px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300; 
    text-align: center;
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 

#en:hover { 
    line-height: 150px; 
    line-height: 20px; 
    color: #e0e0e0;
} 

#en img{ 
    width: 118px;
    height: 78px;
    position: absolute;
    float: bottom;
    clear: bottom;
    bottom: 20px;
    left: 29.8%;
    } 

这是上次有人要求的关于 jsfiddle 的代码: https://jsfiddle.net/f0gfqe6e/4/

提前致谢。

Answer 1

这里你只需将悬停在文本上的颜色设置为透明

---

<div id="en" class="en">Welcome to Stefan's Gallery, click to proceed to the english version of the site.
                <span><a href="./en/"><img src="en.png" width="118" /></a></span>

CSS

 .en:hover { 
         color: transparent;
    }

对剩余的文本字段也同样如此。