raulbaros raulbaros - 1 year ago 52
CSS Question

How to hide div and make it clickable to show an overlay for media screens

I have a

div with a font-awesome icon in a yellow background. This only shows when screen size is smaller than 767px. When this div shows then a user can click it to see the
If screen size is bigger than 768px then the
should not show and when a user hovers-over the image then the overlay shows (this currently works).
What I cannot solve:

  1. How to hide the
    div completely for screens > 768px?

  2. How to make the
    div clickable and when clicked the

$(function() {
var overlay = $('.overlay');
$("#product-detailscar").one('click', function(e) {

@media screen and (max-width: 767px) {
.read-more i {
padding: 5px 10px;
display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-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: 50%;
top: 50%;
@media screen and (min-width: 768px) {
.product-detailscar:hover .overlay {
opacity: 1;
.product-detailscar .overlay {
/*.well.carousel .overlay {*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #F7F7F7;
color: #FFF;
padding: 10px;
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;
/*padding: 25px;
text-align: center;*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="read-more"><i class="fa fa-file-text-o" aria-hidden="true"></i>

Answer Source

To hide .read-more:

@media screen and (min-width: 768px) {
     #read-more {

To make .overlay clickable:

$("#read-more").click(function() {

To hide .overlay on click:

$(".overlay").click(function() {