Responsive hover for responsive image - image

Question

how to do responsive hover?
This is good hover example and it's perfectly fits for my screen size and this is bad not responsive hover example
This is my code
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;
}
Thank you for help

Answer 1

I would say that you must make the .product-img-text be responsive (instead of using hardcoded dimensions)
something like the following
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;
}
and you will have to make .product-img-list be realtive positioned if it is not.
.product-img-list{position:relative}