如何在图片上滑动文字？

塞巴斯蒂安·吉盖尔

我已经写了这段有效的代码。基本上，当用户将鼠标悬停在图像上时，文本会出现在图像上方。

这是一个画廊，所以我需要使用它$(this).children来显示正确的元素。

我不明白的是，我无法使h2 .nom_realisation幻灯片变得混乱。我尝试了几件事但没有成功。我敢肯定这很简单。如果有人能指出我正确的方向？

演示：http : //jsfiddle.net/Vinyl/725hcc62/1/

代码：

的CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

的HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
             <h2 class="nom_realisation">Lorem ipsum</h2>

        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

JavaScript / jQuery

(function ($) {

    $(document).ready(function () {


        $(".container_img").hover(function () {

            $(this).children('.container_nom_realisation').show('slow');
            $(this).children('.text').slideToggle('slow');

        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");

        });
    });

})(jQuery);

乔治

.nom_realisation不是的CHID .container_img，所以你需要.find()的，而不是孩子。
您将无法在幻灯片上为table-cell元素设置动画。要么不以这种方式显示它，要么（因为我假设您使用table-cell的是垂直居中，所以还有另一个元素充当包裹您的表格单元<h2>：

的HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
            <div class='table-cell'>
                 <h2 class="nom_realisation">Lorem ipsum</h2>

            </div>
        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

的CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
.table-cell {
    vertical-align: middle;
    display: table-cell;
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

的JavaScript

(function ($) {
    $(document).ready(function () {
        $(".container_img").hover(function () {
            $(this).children('.container_nom_realisation').show('slow');
            $(this).find('.nom_realisation').slideToggle('slow');
        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");
        });
    });
})(jQuery);

JSFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。