image button with overlay - html

Question

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).
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.
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.
The html code for a button is:
.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;}
<div class="product-container">
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
<a href="http://google.se">
<p class="product-btn">Mono Silk</p>
</a>
</div>
How can I achieve this?

Answer 1

To have the image darker when hover both image and text, I changed this CSS rule
.product-img:hover {opacity: 0.5;}
to this
.product-container:hover img {opacity: 0.5;}
You also had an extra closing </div> tag which I removed.
Having block level (p) element inside an inline (a) is invalid, so I changed your p to a span and added text-align: center; to its CSS rule so the text inside is centered.
Having block level element, like p, inside an inline element is in general invalid, though according to the new HTML5 specs, an a now can have block level elements inside (Thanks to #tjameswhite pointing that out), as long as there is no interactive content within (e.g. buttons or other links).
Sample snippet
.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;
text-align: center;
}
.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-container:hover img {opacity: 0.5;}
<div class="product-container">
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg">
<a href="http://google.se">
<span class="product-btn">Mono Silk</span>
</a>
</div>

Answer 2

Change the Markup so that image comes after the link.
Then css will get the link to be in center of parent:
.product-container {
position:relative;
background-color: #000000;
}
.product-btn {
position: absolute;
top:50%;
left: 50%;
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
transform: translate(-50%, -50%);
}
.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-container > a:hover + img {opacity: 0.5;}
<div class="product-container">
<a href="http://google.se">
<p class="product-btn">Mono Silk</p>
</a>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"></div>
</div>

Answer 3

In CSS (slow the style change in product-container and make hover action for it):
.product-container {position:relative; background-color: #000000;
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;}*/
.product-container:hover img {opacity: 0.5;}
In HTML (put link inside the .product-container div):
<div class="product-container"><img class="product-img" src="./Material _ ProFormat AB_files/monosilk.jpg"/><p class="product-btn">Mono Silk</p></div>

Answer 4

Adjust the markup so the image and text are inside of the link:
<div class="col-sm-3 text-center">
<a href="http://google.se" class="product-container">
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg" alt="">
<div class="product-btn">Mono Silk</div>
</a>
</div>
This removes an extra container (moving the product-container class to the link). Then update styles to something like:
.product-container {
position:relative;
background-color: #000000;
display: block;
height: 426px;
width: 426px;
}
.product-img {
width: 426px;
height: 426px;
}
.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;
text-align: center;
}
.product-container:hover .product-img {opacity: 0.5;}
.product-container:hover .product-btn {background: rgba(0,0,0,1)}
Note that the link (.product-container) has display: block; and a set width and height, as does the image. Adjust as needed.
The advantage to this is that the entire box is now one big clickable button.

Answer 5

A cool trick is using pseudo elements to vertically align inline blocks. This allows for multiple lines of text to also be aligned properly.
I apologise as I'm at work at the moment, so I hope this fiddle helps.
Will go into more detail in an update later if requested:
https://jsfiddle.net/pj5p0s3s/
/*Disgusting stuff for demo :) */
.product-container {
float:left;
margin-right:5px;
max-width:200px;
}
/* */
.product-container {
position:relative;
background-color: #000000;
}
.product-container a {
display:block;
}
.product-container a:after {
content:"";
background: rgba(0,0,0, 0.3);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.product-container a:hover:after {
background: rgba(0,0,0,0.6);
transition: 0.3s;
}
.product-container-overlay {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
z-index:1;
}
.product-container-overlay:before {
content:"";
height:100%;
display:inline-block;
width:1px;
vertical-align:middle;
}
.product-btn {
background-color: rgba(0,0,0, 0.3);
width: 50%;
border: 1px solid #e1e1e1;
color: #ffffff;
padding: 5px 0;
display:inline-block;
vertical-align:middle;
}
.product-img {
width:100%;
height: auto;
display:block;
}
.product-img:hover {
opacity: 0.5;
}
<div class="product-container">
<a href="http://google.se">
<div class="product-container-overlay">
<p class="product-btn">Mono Silk</p>
</div>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
</a>
</div>
<div class="product-container">
<a href="http://google.se">
<div class="product-container-overlay">
<p class="product-btn">Mono Silk long title lipsum</p>
</div>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
</a>
</div>
<div class="product-container">
<a href="http://google.se">
<div class="product-container-overlay">
<p class="product-btn">Mono Silk</p>
</div>
<img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
</a>
</div>