響應式圖像響應式懸停

Question

如何做響應式懸停？

這是很好的懸停例子，它非常適合我的屏幕尺寸，這是不好的不響應懸停例如

這是我的代碼

HTML

<div class="product-img-list"> 
    <%= link_to product_path(product), class: 'product_link' do %> 
    <%= image_tag(product.image_url, class: "img-responsive", size: "300x250") %> 
    <% end %> 
    <span class="product-img-text"><span>code</span></span> 
    </div> 

CSS

span.product-img-text { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 80px; 
    left: 15px; 
    position: absolute; 
    top: 230px; 
    width: 291px; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
} 

.product-img-list:hover span.product-img-text { 
    opacity: 1; 
} 

span.product-img-text span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

.img-responsive { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

.product-img-list.img-responsive { 
    display: inline-block; 
    margin: 0 1em 1em 0; 
    position: relative; 
} 

謝謝大家幫忙

Answer 1

我要說的是，你必須使.product-img-text響應（而不是使用硬編碼的尺寸）

像下面

span.product-img-text { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    position: absolute; 

    height: 25%; /*assuming text is not that much*/ 
    left: 1em; /*to account for margin*/ 
    right:1em /*to account for margin*/ 
    bottom: 0; /*add it to bottom of image*/ 

    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
} 

，你會如果不是，則必須使.product-img-list爲realtive。

.product-img-list{position:relative}