懸停效果在博主中的流行發佈部件

Question

我是一個新手，但我一直在試圖弄清楚如何獲取我的縮略圖的hover effect爲Blogger中的熱門帖子小部件。

我有比較大的縮略圖，我想讓帖子的標題出現在hover。

Like this

誰能幫助我？我一直在試圖找到一個在線解決方案，但迄今爲止一無所獲。

Answer 1

NOTE：事實上下面可以簡單使用display: block;和none實現，但你不能夠轉運的元素，因此，序過境的元素，我們將使用opacity: 0;隱藏和hover我們將其更改爲1 ，並且可以使用rgba()使background不透明，並使用transition使平滑度變得不透明。此外，不要忘記使父元素position: relative;，因爲它包含absolute定位的子元素。

我從頭開始做下面的例子中，你可以去看看...

Demo

div.wrap { 
    position: relative; 
    display: inline-block; 
} 

div.wrap img { 
    display: block; 
} 

.title { 
    opacity: 0; 
    background: rgba(255,255,255,.5); 
    padding: 5px; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    position: absolute; 
    top: 50%; 
    right: 0; 
} 

div.wrap:hover .title { 
    opacity: 1; 
} 

Answer 2

試試這個：

假設你有HTML標記這樣：

<div class="thumbnail"> 
    Iam the main content 
    <div class="onhover"> 
     i am onhover content 
    </div> 
</div> 

個CSS：

.thumbnail{ 
    width:200px; 
    height:100px; 
    background-color:Red; 
} 
.thumbnail:hover .onhover { 
    display: block; 
} 

看到demo

所以基本上，你要的是影響其他元素（具有一定的選擇），當其他一些元素徘徊，基本語法是：

sourceSelector:hover targetSelector{ /*whatever css you want to apply*/}