При клике на картинку открывается новый блок с описанием этой картинки

Есть галерея в модальном окне , как сделать чтобы при клике на ту или иную картинку открывался новый блок (460x337) , а задний фон затухал , то есть задний план переключал в background. Мой пример на jsfiddle

зайдите на второй таб Collections чтобы посмотреть галерею

 .preImg{
    float: right;
}
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:#999999;
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    position: relative;
    width: 1020px;
    height: 610px;
    margin: 1% auto;
    padding: 5px 20px 13px 20px;
    background: #666666;
}
.close {
    color: #FFFFFF;
    height: 45px;
    position: absolute;
    right: 0;
    left:1025px;
    top: 0;
    width: 45px;
    cursor: pointer;
    z-index: 25;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    background:url("images/close-btn.png") no-repeat;
    margin-top:15px;
}

.leftSlideBar{
    width:202px;
    height: 590px;
    float:left;
    position: relative;
    right: 19px;
    bottom:5px;
    background: #505354;
}
.side-bar{
    background-color: #292b2c;
    position: absolute;
    right: 0;
    top:0;
    width: 45px;
    height: 585px;
    z-index: 2;
}
.socialShare{
    width: 100%;
    height: 40px;
    color:#fff;
    margin-top:50px;
    margin-left:8px;
    margin-bottom: 8px;
    background:url("images/socialshare.PNG") no-repeat;
}
.socialButtons{
    position: absolute;
    bottom:0;
    right: 0;
    top:360px;
    width: 45px;
}
.sl-header{
    height: 45px;
    text-align: center;
    color: #FFFFFF;
    font-size: 10px;
}
.sl-header::before{
    content: 'Follow\aus on:';
    white-space: pre;
    position: relative;
    display: block;
}
.sl-buttons{
    position: relative;
    margin: 10px 0;
}
.footer{
    bottom: 0;
    height: 50px;
    left:0;
    position: absolute;
    width: 100%;
    z-index: 10;
    background: #FFFFFF;
}
.logo{
    width: 154px;
    height: 31px;
    position: absolute;
    background: url("images/logo.png") no-repeat;
    left: 25px;
    top:30px;
    display: block;
    z-index: 2;
}
.tabs-wrapper{
    width: 200px;
    height: 160px;
    position: absolute;
    top:90px;
}
.tab-holder{
    margin-left: 0;
    padding-top: 5px;
    float: left;
    list-style: none;
    text-decoration: none;
    color: #FFFFFF;
}
.nav-tabs{
}
.nav-tabs ul{
    margin:0;
    padding:0;
    list-style: none;
}
.nav-tabs li{
    list-style: none;
    display: inline-block;
    padding-top: 10px;
}
.nav-tabs a{
    font-size:18px;
    display: inline-block;
    text-decoration: none;
    color:#FFFFFF;
    padding-top: 10px;
}
.tab-pane{
    display: none;
    bottom: 0;
    left:0;
    position: absolute;
    right: 20px;
    top:0;
    overflow: scroll;
}
.tab-open{
    display: block;
}
.custom-element-0{
    background: url("images/sidebar_image.jpg");
    width: 200px;
    height: 295px;
    position: absolute;
    z-index: 2;
    bottom: 0;
}
.social-button-facebook-icon {
    margin-left:10px;
    height: 35px;
    display: block;
    background: url("images/facebook.png") no-repeat;
}
.social-button-twitter-icon{
    margin-left:10px;
    margin-top: 5px;
    height: 35px;
    display: block;
    background: url("images/twitter.png") no-repeat;
}
.social-button-youtube-icon{
    margin-left:10px;
    height: 35px;
    display: block;
    background: url("images/youtube.png") no-repeat;
}
.social-button-instagram-icon{
    margin-left:10px;
    height: 35px;
    display: block;
    background: url("images/instagram.png")no-repeat;
}
.sl-buttons a{
    transition: transform .5s;
}
.sl-buttons a:hover{
    transform: scale(1.1);
}
.custom-link-discover{
    z-index: 10;
    position: absolute;
    height: 40px;
    bottom: 5px;
    right: 5px;
    background: #f7803a;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #f7803a;
}
.custom-link-discover:hover{
    background-color: #fff;
    color:#f7803a;
}
.tab-content {
    width: 813px;
    height: 579px;
    background-color: #1d1d1d;
    position: absolute;
    left: 203px;
    top: 0;
}
#slides{
    width: 812px;
    height: 439px;
}
#overflow{
    overflow: hidden;
}
.inner{
    width: 400%;
}
#slide1:checked ~ #slides .inner { margin-left:0;}
#slide2:checked ~ #slides .inner { margin-left:-100%;}
#slide3:checked ~ #slides .inner { margin-left:-200%;}
#slide4:checked ~ #slides .inner { margin-left:-300%;}

#slider{
    position: absolute;
    width:812px;
    height: 439px;
}
#slider input {
    display: none;
}
.page{
    float: left;
    width: 25%;
}
.page video{
    width:812px;
    height: 439px;
    margin-top:20px;
}
#active{
    position: relative;
    top:30px;
}
#active label{
    padding-right: 10px;
}
#active label img{
    position: relative;
    width:180px;
    height: 101px;
    left:25px;
    cursor: pointer;
}
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4){}
#slides .inner{
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#collections{
    width:812px;
    height: 1179px;
    overflow: auto ;
}
.inner_col{
    width: 100%;
    height: 100%;
    bottom: 0;
    top:0;
    right: 0;
    left:0;
    position: absolute;
    background: #FFFFFF;
}
#marksFallCollections {
    width: 812px;
    height: 1180px;
    background: #FFFFFF;
}
#marksFallCollections .product_grid{
    margin-left: 5px;
    position: relative;
}
#marksFallCollections .product_grid .col-pr{
    position: absolute;
    margin:5px;
    cursor: pointer;
}
#marksFallCollections .product_grid .col-pr:before{
    transition: opacity .5s;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #505354;
}
#marksFallCollections .product_grid .col-pr:hover:before{
    opacity: .75;
}
#marksFallCollections .product_grid .col-pr:after{
    transition: opacity .5s;
    content: '';
    position: absolute;
    width: 49px;
    height: 49px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/collection_more_icon.png?ac=1506976312");
    opacity: 0;
    top:50%;
    left:50%;
    margin:-25px;
}
#marksFallCollections .product_grid .col-pr:hover:after{
    opacity: 1;
}
#marksFallCollections .product_grid .col-pr-1{
    width: 366px;
    height: 295px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_1.jpg?ac=1506976312");
    top:0;
}
#marksFallCollections .product_grid .col-pr-2{
    top:0;
    left:372px;
    width: 223px;
    height: 287px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_2.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-3{
    left:600px;
    width: 160px;
    height: 119px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_3.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-4{
    left:600px;
    top:125px;
    width: 160px;
    height: 162px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_4.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-5{
    top:301px;
    left:0;
    width: 222px;
    height: 143px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_5.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-6{
    top:301px;
    left: 227px;
    width: 138px;
    height: 143px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_6.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-7{
    left:372px;
    top:293px;
    width: 387px;
    height: 290px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_7.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-8{
    left:0;
    top:450px;
    width: 222px;
    height: 132px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_8.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-9{
    left:227px;
    top:450px;
    width: 138px;
    height: 132px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_9.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-10{
    left:0;
    top:587px;
    width: 365px;
    height: 287px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_10.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-11{
    left:372px;
    top:587px;
    width: 223px;
    height: 140px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_11.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-12{
    left:600px;
    top:587px;
    width: 160px;
    height: 140px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_12.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-13{
    left:372px;
    top:733px;
    width: 223px;
    height: 141px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_13.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-14{
    left: 600px;
    top: 733px;
    width: 160px;
    height: 141px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_14.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-15{
    left:0;
    top:880px;
    width: 437px;
    height: 288px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_15.jpg?ac=1506976312");
}
#marksFallCollections .product_grid .col-pr-16{
    left:442px;
    top:880px;
    width: 319px;
    height: 288px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/coll_16.jpg?ac=1506976312");
}
<!---->
#gallery{
    position: absolute;
    width:812px;
    height: 540px;
}
#gallery input {
    display: none;
}
#slides_gallery{
    width: 812px;
    height: 439px;
}
#overflow_gallery{
    overflow: hidden;
}
#sld1:checked ~ #slides_gallery .inner { margin-left:0;}
#sld2:checked ~ #slides_gallery .inner { margin-left:-100%;}
#sld3:checked ~ #slides_gallery .inner { margin-left:-200%;}
#sld4:checked ~ #slides_gallery .inner { margin-left:-300%;}
#active_gallery{
    position: relative;
    top:110px;
}
#active_gallery label{
    width: 10px;
    height: 10px;
}
#active_gallery label{
    position: relative;
    left:390px;
}
#sld1:checked ~ #active_gallery label  .thumb-1:nth-child(1),
#sld2:checked ~ #active_gallery label  .thumb-2:nth-child(2),
#sld3:checked ~ #active_gallery label  .thumb-3:nth-child(3),
#sld4:checked ~ #active_gallery label  .thumb-4:nth-child(4)
{
    background: #f7803a;
    outline: none;
}
#slides_gallery .inner{
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.thumb-1 {
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
    background:#fff;
    cursor: pointer;
    opacity: 1;
    z-index: 15;
}
.thumb-2{
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
    background:#fff;
    cursor: pointer;
    opacity: 1;
    z-index: 15;
}
.thumb-3{
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
    background:#fff;
    cursor: pointer;
    opacity: 1;
    z-index: 15;
}
.thumb-4{
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
    background:#fff;
    cursor: pointer;
    opacity: 1;
    z-index: 15;
}

HTML

    <a href="#openModal" class="preImg">
    <img src="images/mark's_banner.PNG">
</a>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close"></a>
        <div class="leftSlideBar">
            <a href="#" class="logo"></a>
                <div class="tabs-wrapper">
                    <div class="tab_holder">
                        <ul class="nav-tabs">
                            <li><a href="#tabs1" class="tab-active" data-toggle="tab">VIDEOS</a></li>
                            <li><a href="#tabs2" data-toggle="tab">COLLECTIONS</a></li>
                            <li><a href="#tabs3" data-toggle="tab">LOOKBOOK</a></li>
                            <li><a href="#tabs4" data-toggle="tab">FIND A STORE</a></li>
                        </ul>
                    </div>
                </div>
            <div class="custom-element-0"></div>
        </div>
            <div class="tab-content">
                <div class="tab-pane" id="tabs1">
                <div id="slider">
                    <input type="radio" name="slider" id="slide1" checked="">
                    <input type="radio" name="slider" id="slide2">
                    <input type="radio" name="slider" id="slide3">
                    <input type="radio" name="slider" id="slide4">
                <div id="slides">
                    <div id="overflow">
                        <div class="inner">
                            <div class="page">
                                <video src="videos/01.ObstacleCourse_Eng_Master.mp4" ></video>
                            </div>
                            <div class="page">
                                <video  src="videos/03.Work_Eng_Master.mp4"></video>
                            </div>
                            <div class="page">
                                <video src="videos/06.GoingOut_Eng_Master.mp4" ></video>
                            </div>
                            <div class="page">
                                <video src="videos/09.Selfie_Eng_Master.mp4" ></video>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="active">
                    <label for="slide1">
                        <img src="images/thumb-2.jpg"/>
                    </label>
                    <label for="slide2">
                        <img src="images/thumb-3.jpg"/>
                    </label>
                    <label for="slide3">
                        <img src="images/thumb-4.jpg"/>
                    </label>
                    <label for="slide4">
                        <img src="images/thumb-1.jpg"/>
                    </label>
                </div>
                </div><!--slider-->
                </div>
                <div id="tab_frames" class="tab-frames">
                        <div class="tab-pane" id="tabs2">
                            <div class="inner_col">
                                <div id="Collections">
                                    <div id="marksFallCollections" style="position: relative">
                                        <div class="product_grid">
                                            <div class="col-pr col-pr-1" data-pos="1"></div>
                                            <div class="col-pr col-pr-2" data-pos="2"></div>
                                            <div class="col-pr col-pr-3" data-pos="3"></div>
                                            <div class="col-pr col-pr-4" data-pos="4"></div>
                                            <div class="col-pr col-pr-5" data-pos="5"></div>
                                            <div class="col-pr col-pr-6" data-pos="6"></div>
                                            <div class="col-pr col-pr-7" data-pos="7"></div>
                                            <div class="col-pr col-pr-8" data-pos="8"></div>
                                            <div class="col-pr col-pr-9" data-pos="9"></div>
                                            <div class="col-pr col-pr-10" data-pos="10"></div>
                                            <div class="col-pr col-pr-11" data-pos="11"></div>
                                            <div class="col-pr col-pr-12" data-pos="12"></div>
                                            <div class="col-pr col-pr-13" data-pos="13"></div>
                                            <div class="col-pr col-pr-14" data-pos="14"></div>
                                            <div class="col-pr col-pr-15" data-pos="15"></div>
                                            <div class="col-pr col-pr-16" data-pos="16"></div>
                                        </div>
                                    </div>
                                    <div class="demo-wrapper close-area active">
                                        <div class="product_demo active" data-demo-pos="1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="tab-pane" id="tabs3">
                    <div id="gallery">
                        <input type="radio" name="gallery" id="sld1" checked="">
                        <input type="radio" name="gallery" id="sld2">
                        <input type="radio" name="gallery" id="sld3">
                        <input type="radio" name="gallery" id="sld4">
                        <div id="slides_gallery">
                            <div id="overflow_gallery">
                                <div class="inner">
                                    <div class="page">
                                        <img src="images/img1.jpg"/>
                                    </div>
                                    <div class="page">
                                        <img src="images/img2.jpg"/>
                                    </div>
                                    <div class="page">
                                        <img src="images/img3.jpg"/>
                                    </div>
                                    <div class="page">
                                        <img src="images/img4.jpg"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="active_gallery">
                            <div class="slide-thumbs active">
                                <label for="sld1">
                                    <div class="thumb-1" tabindex="1"></div>
                                </label>
                                <label for="sld2">
                                    <div class="thumb-2" tabindex="2"></div>
                                </label>
                                <label for="sld3">
                                    <div class="thumb-3" tabindex="3"></div>
                                </label>
                                <label for="sld4">
                                    <div class="thumb-4" tabindex="4"></div>
                                </label>
                            </div>
                        </div>
                    </div><!--slider-->
                </div>
            </div><!--content-->
        <div class="side-bar">
            <div class="socialShare"></div>
                <div class="socialButtons">
                    <div class="sl-header"></div>
                    <div class="sl-buttons">
                        <a href="#" class="social-button-facebook-icon"></a>
                            <a href="#" class="social-button-twitter-icon"></a>
                        <a href="#" class="social-button-youtube-icon"></a>
                            <a href="#" class="social-button-instagram-icon"></a>
                    </div>
                </div>
        </div>
        <div class="footer">
            <div class="custom-links">
               <a href="#" class="custom-link-discover">
                   <span>DISCOVER THE COLLECTION</span>
               </a>
            </div>
        </div>
    </div>
</div>

JS

 var tabsLink = document.querySelectorAll('.nav-tabs a'),
    tabsElement = document.querySelectorAll('.tab-pane'),
    i;
tabsElement[0].classList.add('tab-open');
var showTabs = function(e) {
    e.preventDefault();
    var targetElement = document.querySelectorAll(this.getAttribute('href'));
    for (i = 0; i < targetElement.length; i++) {
        if (targetElement[i].classList.contains('tab-open')) {
            return false;
        } else targetElement[i].classList.add('tab-open');
    }
    //---- добавлено
    targetElement = document.querySelectorAll(".tab-pane.tab-open:not("+ this.getAttribute('href')+")");
    for (i = 0; i < targetElement.length; i++) {
        targetElement[i].classList.remove('tab-open');
    }
    //----
};
for (i = 0; i < tabsLink.length; i++) {
    tabsLink[i].addEventListener('click', showTabs);
}