CSS/jQuery的 - 響應哈弗

我想實現一個懸停效果，以一個負責任的博客列表 -CSS/jQuery的 - 響應哈弗

基本上我使用的這個版本的風格 - http://startbootstrap.com/3-col-portfolio和我「D喜歡在一個灰色覆蓋褪色與「readmore」按鈕，只要鼠標懸停在particlualt博客作爲ythis迅速嘲笑圖像 -

enter image description here

我想我可以放置在彼此頂部的div的博客專區內和淡入/淡出懸停作爲在此 -

<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>

但作爲其響應，我不知道如何讓每個div來填充所需的空間 - 或者這是否是實現我想要的最佳方式。有什麼建議？

來源

2014-06-13 Dancer

您還沒有開通script元素：'

如果您正在尋找有影像，那麼你可能在找這個效果！ JSFiddle

我忽略了你的代碼，並用不同的方式使得它有沒有必要，你什麼時候使用JQuery可以css

的Html實現它：

<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>

CSS：

.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 " */ 
}

讓我知道這是否爲你工作！ :)

來源

2014-06-13 15:57:12 21CmOfPain

相關問題