image button with overlay
<p>Almost  at the bottom of the page you see 4 images with a button inside of each image. (Verona, Mono Silk, Fibre Silk and Akvarell).</p>

<p>I'm trying to achieve an image, with a centered (both veritically and horizontally) text inside of it. And it all needs to be responsive.</p>

<p>The most important thing that I need to fix with these buttons though is that when you hover over a button, I want the image to become darker (just like it is now) but I want it to stay that way even when you hold the mouse over the text inside. I don't understand which approach I need to have to achieve that.</p>

<p>The html code for a button is:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.product-container {
    position:relative;
    background-color: #000000;
    }

    .product-btn {
    position: absolute;
    top:39%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: rgba(0,0,0, 0.3);
    width: 50%;
    border: 1px solid #e1e1e1;
    color: #ffffff;
    padding: 5px 0;
    }

    .product-img {
    width:100%;
    height: auto;
    opacity: 1; 
 transition:
    opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -webkit-transition: opacity 0.1s ease-in-out;
    }

    .product-img:hover {opacity: 0.5;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="product-container"&gt;
    &lt;img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/&gt;
    &lt;a href="http://google.se"&gt;
        &lt;p class="product-btn"&gt;Mono Silk&lt;/p&gt;
    &lt;/a&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How can I achieve this?</p>