光标在投资组合中的图像上方时如何放置文本

时间:2019-10-15 08:06:00

标签: javascript css wordpress portfolio

当光标在“作品集”中的图像上方时,我试图查看图像的描述/标题。是Wordpress / DIVI:

https://iconsmgmt.com/models/

首先,放置一个名为“ ds-hover-gallery”的CSS类

然后使用此代码:

    <script>
(function ($) {
    $(document).ready(function () {
        $(document).bind('ready ajaxComplete', function () {
            $(".ds-hover-gallery .et_pb_gallery_item").each(function () {
                $(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").wrapAll('<div class="ds-gallery-text"></div>');
            });
        });
    });
})(jQuery);
</script>

我还添加了一些CSS:

    .ds-hover-gallery .ds-gallery-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, .8);
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.ds-hover-gallery .et_pb_gallery_item:hover .ds-gallery-text {
    opacity: 1;
}

但是什么也没发生。是因为呼叫是到画廊而不是投资组合?在这种情况下,代码是什么样的?

谢谢!

0 个答案:

没有答案