Сетка наложения изображений

Question

У меня есть сетка изображений. и когда вы нажимаете, надпись с уменьшенной непрозрачностью должна отображаться сверху, если другой щелкнут, тогда предыдущий должен вернуться к нормальному, а новый - оверлей. Я попытался кучу разных способов, и ничего работает:

<div class="grid-item"> 
    <a href="overlayActiveOne()"> 
    <img src="img/img.png" class="img-responsive"> 
    </a> 
    <div id="overlay-one"></div> 
</div> 
<div class="grid-item"> 
    <a href="overlayActiveTwo()"> 
    <img src="img/img2.png" class="img-responsive"> 
    </a> 
    <div id="overlay-two"></div> 
</div> 
<div class="grid-item"> 
    <a href="overlayActiveThree()"> 
    <img src="img/img3.png" class="img-responsive"> 
    </a> 
    <div id="overlay-three"></div> 
</div> 
<div class="grid-item"> 
    <a href="overlayActiveFour()"> 
    <img src="img/img4.png" class="img-responsive"> 
    </a> 
    <div id="overlay-four()"></div> 
</div> 

CSS:

#overlay-one #overlay-two #overlay-three #overlay-four { 
    background-color: black; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

JS:

function overlayActiveOne() { 
    var overlay = document.getElementById("overlay-one") 
    overlay.style.opacity = 0.7; 
} 

function overlayActiveTwo() { 
    var overlay = document.getElementById("overlay-two"); 
    overlay.style.opacity = 0.7;  
} 

function overlayActiveThree() { 
    var overlay = document.getElementById("overlay-three"); 
    overlay.style.opacity = 0.7;  
} 

function overlayActiveFour() { 
    var overlay = document.getElementById("overlay-four"); 
    overlay.style.opacity = 0.7;  
} 

Answer 1

попробовать что-то вроде этого

$('.grid-item').click(function() { 
 
    $(this).addClass('active'); 
 
    $('.grid-item').not(this).removeClass('active'); 
 
});

.grid-item { 
 
    float: left; 
 
    width: 33.3%; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
    transition: all 0.3s ease-in; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.grid-item img{ 
 
    width: 100%; 
 
} 
 

 
.overlay { 
 
    opacity: 0.7; 
 
    position: absolute; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    background: white; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in; 
 
} 
 

 
.grid-item.active .overlay{ 
 
    opacity: 0.7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="grid-item"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div class="overlay">Overlay</div> 
 
</div> 
 

 
<div class="grid-item"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div class="overlay">Overlay</div> 
 
</div> 
 

 
<div class="grid-item"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div class="overlay">Overlay</div> 
 
</div>