如何隐藏div并使其可单击以显示媒体屏幕的叠加层

Question

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 1

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();
});