raulbaros raulbaros - 2 months ago 8
CSS Question

Button click to show overlay over image (only CSS)

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"><a href="#overlay" class="button"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i></a>
</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

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"><a href="#overlay" class="button"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i></a>
				</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 ;)

Comments