Question

我想修改bootstrap缩略图悬停选项，只是将颜色放在带有一些文本的图像上。我无法弄明白并找到如何进行基本图像悬停以更改图片上的颜色并添加一些文字。我非常喜欢本文https://www.elegantthemes.com/blog/tips-tricks/css-tricks-for-your-divi-theme-project-and-product-thumbnails

中的转换

但是我无法弄清楚要添加的CSS等等......有人可以向我解释覆盖图像和在悬停时添加居中文本的基础知识。我知道这是非常基本的东西，但我真的遇到了麻烦。如果帮助可以坚持以下代码？

<div class="col-xs-6 col-md-3">
    <div class="thumbnail">
        <img src="images/bg3.jpg">
    </div>
</div>

Answer 1

jQuery＆amp; CSS将是您完成此任务的最佳选择。我很快就建立了它，它是一种完成你所寻找的简单方法。它应该让你开始，希望它有所帮助。 http://jsfiddle.net/zacnespral21/wke9jg7j/

至于如何实现这一点的解释，我建议阅读jQuery悬停效果以及CSS悬停效果。您还可以使用jQuery鼠标悬停，这将使小提琴更简单，更清洁。

$(function() {    

$('something').hover(

    function() {
        $(this).find('.caption').slideDown(250);
        $('.caption-btm').hide();
    },

    function() {
        $(this).find('.caption').slideUp(250);
        $('.caption-btm').show();
    });

$('something').hover(

    function() {
        $(this).find('.caption').fadeIn(250);
    },

    function() {
        $(this).find('.caption').fadeOut(250);
    });    

$('something').hover(

    function() {
        $(this).find('.caption').show();
    },

    function() {
        $(this).find('.caption').hide();
    });

}）;

CSS Hover：http://www.w3schools.com/cssref/sel_hover.asp

jQuery Hover：https://api.jquery.com/hover/

jQuery Mouse Over：https://api.jquery.com/mouseover/

修改引导程序缩略图

1 个答案: