垂直中間顯示圖像hover div

我想在圖像上顯示水平條紋以垂直對齊。這是我的代碼

的Html

<div class="demobox" id="demo-5"> 
     <img src="Untitled-1000x288.jpg" /> 
     <div class="details"> 
      <h3>Play Trialer</h3> 
     </div> 
</div>

CSS

#demo-5 { 
    position: relative; 
} 

.demobox { 

    float: left; 
    height: 288px; 

    overflow: hidden; 
    width: 1000px; 
} 

#demo-5:hover .details { 
    margin-left: 0; 
} 

#demo-5 .details { 
    left: 0; 
    margin-left: -1200px; 
    opacity: 0.7; 
    filter:alpha(opacity=70); 
    position: absolute; 
    top: 0; 
} 

.details { 
    background: none repeat scroll 0 0 #000000; 
    color: #FF0000; 
    height: 50px; 
    margin-top: 119px; 
    text-align: center; 
    width: 735px; 
}

現在的問題是圖像不具有固定的高度& width.And我想在中間顯示水平條紋，怎麼能一世？

將非常感謝您的幫助！

來源

2011-09-30 Ajay Patel

我認爲可能ü沒有得到我的問題，我想在中間顯示圖像懸停格，和圖片動態寬度，我現在正在嘗試這可能對我有用http://css-tricks.com/snippets/css/center-div-with-dynamic-height/ –

您需要將容器的css位置設置爲相對並絕對定位容器內圖像的標題。

訣竅是使用百分比垂直定位並通過margin-top減去條紋高度的一半。

快速示例jsfiddle。

編輯：我很喜歡讀的問題...這裏是更正後的答案:-)

來源

2011-09-30 07:01:09 JoshuaBoshi

感謝和遲到對不起 –

垂直中間顯示圖像hover div

回答

相關問題