Button click to show overlay over image (only CSS) - html

Question

I am trying to achieve that when you click the yellow circle with fa-icon inside that then the overlay shows over my image. Now the overlay shows below the image (green background with white text). My overlay code works, to see that, change div id="overlay" to div class="overlay".
How to make the button click show my overlay over the image (no javascript)?
/*#media screen and (max-width: 767px) {*/
.button i {
padding: 8px 13px;
display: inline-block;
-moz-border-radius: 180px;
-webkit-border-radius: 180px;
border-radius: 180px;
-moz-box-shadow: 0px 0px 2px #888;
-webkit-box-shadow: 0px 0px 2px #888;
box-shadow: 0px 0px 2px #888;
background-color: yellow;
color: red;
position: absolute;
left: 20%;
top: 20%;
}
/*}*/
.button i:hover {
color:#FFF;
background-color:#000;
}
/*#media screen and (min-width: 768px) {*/
.product-detailscar:hover .overlay {
opacity: 1;
}
/*}*/
.product-detailscar {
background-color: #E6E6E6;
text-align: center;
position: relative;
}
.intro, .userfield1car {
color:#fff;
font-weight:700;
font-size:22px;
text-align:center;
background-color:green;
}
.product-detailscar .overlay {
/*.well.carousel .overlay {*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: blue;
color: #FFF;
text-align: left;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
/*vertical-align: middle;*/
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<a href="#" target="_blank">
<div class="product-detailscar">
<div class="image-video-linksidebar">
<img alt="#" src="http://lorempixel.com/200/200">
<div class="read-more"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i>
</div>
</div>
<div id="overlay">
<div class="intro">
Intro description car
</div>
<div class="userfield1car">
Userfield-1-car
</div>
<div class="userfield1car">
Userfield-2-car
</div>
<div class="userfield1car">
Userfield-3-car
</div>
</div>
</div>
<!--</div>--></a>
</div>

Answer 1

You can add the following part to your CSS:
#overlay {
display: none;
}
#overlay:target {
display: block;
}
And then in your code change:
.product-detailscar .overlay
To:
#overlay
And change opacity to more then 0, ex. 0.5;
Note that it will only work one way, so it will only show the overlay. If you want to show/hide overlay in pure CSS, the checkbox hack is the way to go. For more info check https://css-tricks.com/the-checkbox-hack/
Updated example (no checkbox hack):
.button i {
padding: 8px 13px;
display: inline-block;
-moz-border-radius: 180px;
-webkit-border-radius: 180px;
border-radius: 180px;
-moz-box-shadow: 0px 0px 2px #888;
-webkit-box-shadow: 0px 0px 2px #888;
box-shadow: 0px 0px 2px #888;
background-color: yellow;
color: red;
position: absolute;
left: 20%;
top: 20%;
}
.button i:hover {
color:#FFF;
background-color:#000;
}
.product-detailscar:hover .overlay {
opacity: 1;
}
.product-detailscar {
background-color: #E6E6E6;
text-align: center;
position: relative;
}
.intro, .userfield1car {
color:#fff;
font-weight:700;
font-size:22px;
text-align:center;
background-color:green;
}
#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
border-radius: 0;
background: blue;
color: #FFF;
text-align: left;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#overlay:target {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<a href="#" target="_blank">
<div class="product-detailscar">
<div class="image-video-linksidebar">
<img alt="#" src="http://lorempixel.com/200/200">
<div class="read-more"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i>
</div>
</div>
<div id="overlay">
<div class="intro">
Intro description car
</div>
<div class="userfield1car">
Userfield-1-car
</div>
<div class="userfield1car">
Userfield-2-car
</div>
<div class="userfield1car">
Userfield-3-car
</div>
</div>
</div>
<!--</div>--></a>
</div>
BTW, it is a good idea to clean up your code ;)

Answer 2

You can move the overlay div just beneath the image-video-linkssidebar class like this:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<a href="#" target="_blank">
<div class="product-detailscar">
<div class="image-video-linksidebar">
<div id="overlay">
<div class="intro">
Intro description car
</div>
<div class="userfield1car">
Userfield-1-car
</div>
<div class="userfield1car">
Userfield-2-car
</div>
<div class="userfield1car">
Userfield-3-car
</div>
</div>
<img alt="#" src="http://lorempixel.com/200/200">
<div class="read-more"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i>
</div>
</div>
</div>
<!--</div>--></a>
</div>
Then add these styles to overlay:
position: absolute;
z-index: 9999;
margin: 0 auto;
width: 100%;