CSS/Jquery-响应悬停

我想对响应性博客列表实施悬停效果-

基本上，我使用的是一个样式化的版本，每当鼠标悬停在particlualt博客上时，我想用“readmore”按钮淡入灰色覆盖层，就像这张快速模拟的图片一样

我想我可以把div放在blog div中，然后在hover上淡入淡出，如下所示-

<div class="col-md-4 portfolio-item">
        <div style="background:#FFF;" class="top">
            <a href="#project-link">
                <img class="img-responsive" src="http://breadwinningmama.com/wp-content/uploads/2013/04/fitness-running-shoes_fe.jpg">
            </a>
            <h3><a href="#project-link">A Fitness Article</a>
            </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna.. <a href="articleInfo.html">Read More</a></p>
        </div>
        <div style="background:#000; width:100px; height:100px;" class="cover">
        read more
        </div>

        <div>

        </div>
        </div>


$(document).ready(function() {

$('.portfolio-item ').mouseenter(function() {
  $('.top').fadeOut('slow', function() {
    // Animation complete.
  });

  $('.cover').fadeIn('slow', function() {
    // Animation complete.
  });
}).mouseleave(function() {
  $('.top').fadeIn('slow', function() {
    // Animation complete.
  });

  $('.cover').fadeOut('slow', function() {
    // Animation complete.
  });
 });
 });
</script>

Lorem ipsum dolor sit amet，献祭精英。Nam viverra euismod odio，孕妇pellentesque urna

阅读更多
$（文档）.ready（函数（）{
$（'.portfolio item'）.mouseenter（函数（）{
$（'.top'）.fadeOut（'slow'，function（）{
//动画完成。
});
$（'.cover'）.fadeIn（'slow'，function（）{
//动画完成。
});
}).mouseleave（函数（）{
$（'.top'）.fadeIn（'slow'，function（）{
//动画完成。
});
$（'.cover'）.fadeOut（'slow'，function（）{
//动画完成。
});
});
});

---

但由于它的响应性，我不确定如何让每个div填满所需的空间，或者这是否是实现我想要的最佳方式。有什么建议吗？

如果您正在寻找图像的效果，那么您可能正在寻找以下内容：

我忽略了你的代码，并用另一种方式编写了它！如果你可以用

css

Html:

---

让我知道这是否对你有效！：）

使用你的代码，我想你可以试试这样的东西

HTML

---

你还没有打开脚本元素：

你能做一把小提琴吗？我试着用给定的代码做一把小提琴，但是当你把鼠标悬停在提供的图像上时，它会导致几乎无限的淡入淡出循环…嗨，克里斯，这不是完整的代码-只是为了解释我所说的-我会做一把小提琴，你可以用它来完成整个事情CSS和a

：不过要悬停。
<a href="#" class="wrapper">
    <span class="text">
        Read More!
    </span>
    <img src="http://www.1stwebdesigner.com/wp-content/uploads/2009/11/webdesign-books-wishlist/css-missing-manual-books-web-development-books.jpg">
</a>

.wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
}
.text {
    position: absolute;
    top: 0;
    color:#f00;
    background-color:rgba(255,255,255,0.7);
    width: 300px;
    height: 391px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:1;
}

img {
    z-index:1;
}
span.text
{
  width: 300px;
  height: 391px;
  color: #000;
  text-align: center;
  line-height: 391px; /* Magic Trick to align text " vertically " */
}

<div class="col-md-4 portfolio-item">
    <div class="top">
        <a href="#project-link">
            <img class="img-responsive" src="http://breadwinningmama.com/wp-content/uploads/2013/04/fitness-running-shoes_fe.jpg">
        </a>
     <h3><a href="#project-link">A Fitness Article</a></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna...</p>
</div>
<div class="cover"><a href="articleInfo.html">Read More</a></div>

.portfolio-item{
    position:relative;
}

.cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background:#444;
    opacity: .4;    
}

.portfolio-item:hover .cover{
    display:block;
}