raulbaros raulbaros - 2 months ago 6
CSS Question

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

I have a

read-more
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
.overlay
.
If screen size is bigger than 768px then the
read-more
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
    read-more
    div completely for screens > 768px?

  2. How to make the
    read-more
    div clickable and when clicked the
    .overlay
    shows?





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

@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>
</div>




Answer

To hide .read-more:

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

To make .overlay clickable:

$("#read-more").click(function() {
    $(".overlay").show();
});

To hide .overlay on click:

$(".overlay").click(function() {
    $(".overlay").hide();
});
Comments