Question

我希望在此网站上悬停的图片中获得相同的效果：http://www.cssdesignawards.com/website-of-the-day-award-winners.php

图像具有响应性，当它们悬停时，它们会显示文字并淡化紫色背景。

有没有人知道重现此效果的代码？

Answer 1

在执行其他jQuery脚本之前在标题中包含 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来自https://developers.google.com/speed/libraries/devguide的上述脚本代码的链接，用于最新发布的Google托管jQuery库。

下次提出问题时，请包含您拥有的代码，您尝试过的代码以及jsfiddle（http://www.jsfiddle.net）。 stackoverflow社区可能会接受您的问题。查看this以获取有关如何在stackoverflow上正确提出问题的更多信息。 如果您没有证明自己已经尝试过这样做，请不要让人们为您“制作”代码。

你很幸运我加拿大，无论如何这里是代码：

<强> HTML

<div class="container">
    <img class="imagesWithHover" src="http://placehold.it/300" />
    <div class="showMeOnImageHover">
        <div class="contentHolder">
            <div class="title">My Title</div>
            <div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>
<div class="container">
    <img class="imagesWithHover" src="http://placehold.it/300" />
    <div class="showMeOnImageHover">
        <div class="contentHolder">
            <div class="title">My Other Title</div>
            <div class="content">My other content is here yay it looks so nice woohoo</div>
        </div>
    </div>
</div>

<强> CSS

.showMeOnImageHover {
    background-color:rgba(170, 0, 170, 0.3);
    font-family:Arial;
    color:white;
    text-align:center;
    display:table-cell;
    position:absolute;
}
.showMeOnImageHover>.contentHolder {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin:10px;
}
.showMeOnImageHover .title {
    font-size:30px;
}
.showMeOnImageHover .content {
    font-size: 16px;
}

<强> JS

var numberOfImages = $(".imagesWithHover").length;
var numberOfDivOverlays = $(".showMeOnImageHover").length;
for (var i = 0; i < numberOfDivOverlays; i++) {
    var width = $(".imagesWithHover:eq(" + i + ")").width();
    var height = $(".imagesWithHover:eq(" + i + ")").height();
    var left = $(".imagesWithHover:eq(" + i + ")").position().left;
    var top = $(".imagesWithHover:eq(" + i + ")").position().top;
    $(".showMeOnImageHover:eq(" + i + ")").css({
        width: width,
        height: height,
        left: left,
        top: top
    });
}
$(".showMeOnImageHover").css("opacity", 0);
$(".showMeOnImageHover").hover(function () {
    $(this).animate({
        "opacity": 1
    }, 500);
}, function () {
    $(this).animate({
        "opacity": 0
    }, 500);
});

注意：我使用jQuery获取 width，height，left，top 属性的方式，每个元素的索引，类名为.showMeOnImageHover 会将图片索引与类.imagesWithHover匹配（其中 index 是其所属类中特定项的索引 - 按行：var numberOfImages = $(".imagesWithHover").length; 和 var numberOfDivOverlays = $(".showMeOnImageHover").length;）。因此，如果您有30个图像，并且只有29个具有相应类名的div，则只有前29个图像在您悬停时才会有div。如果你想改变它，你可以通过使用类似下面的代码来获取各个div的兄弟姐妹来获得属性：

var property = $(".showMeOnImageHover").siblings(".imagesWithHover").property;

其中property是您要访问的属性（宽度，高度，左侧，顶部）

将文本悬停在响应式图像上

1 个答案: