.clickable-img{border-radius:5px;cursor:pointer;transition:.3s;width:100%}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);transition:background .5s ease}.hover-img{position:relative}.hover-img:hover .overlay{display:block;background:rgba(0,0,0,.3);cursor:pointer}.hover-img:hover .hover-btn{opacity:1;cursor:pointer}.hover-btn{position:absolute;width:60px;height:60px;top:0px;bottom:0px;margin:auto;right:0px;left:0px;width:60px;height:60px;text-align:center;opacity:0;transition:opacity .35s ease}.modal img{max-width:70vw;max-height:40vw}.modal{text-align:center;display:none;position:fixed;z-index:1;padding-top:70px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.75)}.modal-content{margin:auto;display:block;width:80%;max-width:700px}.modal-content,#caption{animation-name:zoom;animation-duration:.6s}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:bold;transition:.3s}.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width:700px){.modal-content{width:100%}}