将滑鼠游标移到一个负责任的形象

Question

我希望得到关于这个网站从图片上悬停同样的效果：http://www.cssdesignawards.com/website-of-the-day-award-winners.php

的图像响应和徘徊的时候，他们表现出的文本，并在紫色背景褪色。

有谁知道重现这种效果的代码？

Answer 1

Here

你的其他的jQuery脚本的执行，从上面的脚本标签

链接从https://developers.google.com/speed/libraries/devguide对最近谷歌的托管jQuery库的发布之前包括在你的头<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>。

---

你问一个问题，下一次，包括你的代码，你已经尝试代码和的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，与类名索引的每个元素的属性的方式.showMeOnImageHover会匹配图像的索引与类别.imagesWithHover（其中索引是其所属类别内的特定项目的索引 - 按行：var numberOfImages = $(".imagesWithHover").length;和var numberOfDivOverlays = $(".showMeOnImageHover").length;）。因此，如果您有30张图片，并且只有29个div带有相应的类名称，则当您将它们悬停时，只有前29张图片会有div。如果你想改变这一点，你可以用类似下面的代码获取相应的div的兄弟姐妹得到的属性：

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

其中property是您要访问（宽度，高度的财产，离开，顶部）