divを非表示にしてクリック可能にして、メディア画面のオーバーレイを表示するには

Question

read-more divは、黄色の背景にfont-awesomeアイコンが付いています。画面サイズが767pxより小さい場合のみ表示されます。このdivが表示されたら、ユーザーはそれをクリックして.overlayを表示できます。 画面サイズが768pxより大きい場合はread-moreが表示されず、ユーザーが画像の上をホバーオーバーするとオーバーレイが表示されます（これは現在動作しています）。

1. を画面> 768pxのために完全にread-moreのdivを非表示にする方法：私は解決することはできません何 ？
2. read-more divをクリックしてクリックすると、 .overlayが表示されます。

$(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

.read-more非表示にするには：.overlayクリック可能にするために

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

を：非表示にするには

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

をクリック時の：

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