javascript - Click on icon to display overlay -

i have yellow fa-icon in center. screens sizes smaller 767px. above overlay shows upon hover-over. <767px display, hover-over effect on fa-icon. not work (probably because of .overlay on top of it) = problem 1. also, try when clicking fa-icon overlay shows. not working @ (= problem 2). how solve these?

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

.product-detailsmas .overlay {      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      opacity: 0;      border-radius: 0;      background: #f7f7f7;      color: blue;      text-align: center;      border-top: 1px solid #a10000;      /* vertical-align: middle; */      -webkit-transition: opacity 500ms;      -moz-transition: opacity 500ms;      -o-transition: opacity 500ms;      transition: opacity 500ms;  }    .product-detailsmas {      background-color: #e6e6e6;      text-align: center;    position: relative;  }    @media screen , (min-width: 768px) {  .product-detailsmas:hover .overlay {      opacity: 1;  }    }    .well.sb .product-titlesidebar {      font-size: 13px;      font-family: 'montserrat',sans-serif;      color: #444;      font-weight: 700;      line-height: 1.25em;      margin: 5px;  }    @media screen , (max-width: 767px) {    .read-more {          padding: 5px 10px;          display: inline-block;          -moz-border-radius: 140px;          -webkit-border-radius: 140px;          border-radius: 100px;          -moz-box-shadow: 0 0 2px #888;          -webkit-box-shadow: 0 0 2px #888;          box-shadow: 0 0 2px #888;          background-color: yellow;  		opacity:0.7;          color: #888;          position: absolute;          left: 50%;      	top: 50%;      	transform: translate(-50%,-50%);      }  	  	.read-more i:hover {  		color:#fff;  		background-color:#000;  	}    }

<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-detailsmas">              <div class="image-video-linksidebar">                  <img alt="#" src="http://lorempixel.com/100/100">                  <div class="brandmas">                      brand                  </div>                  <div class="categorymas">                      category                  </div>                <div class="read-more"><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>  				</div>              </div>              <div class="overlay">                  <div class="intro-descriptioncar">                      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 class="product-titlesidebar">              car title brand category model-this should not affected overlay hover          </div><!--</div>--></a>      </div>

problem #1:

move .read-more{position: absolute} outside of @media tag fix it. somehow, when tested in stack overflow snippet tool worked.

problem #2:

in $("#read-more").click(function() {, treat read-more id.

read-more class, not id, replace $(".read-more").click(function() {

there, should working now. ;)

update:

whoops, messed up. think best solution have overlay @ height: 0px; when you're not using it. you're using jquery right? run when clicks on it. $(".read-more").css("height", "(the height)"); similar using things display: none , visibility: hidden