есть 4 блока в каждом из которых находится картинка. Каким образом можно сделать так чтобы изначально не было видно изображений во всех четырех блоках, но при клике на блок появлялась картинка внутри него а при клике на другой блок картинка исчезала из предыдущего блока.
body{
text-align:center;
font-size: 20px;
}
img{
width:100%;
height:100%;
}
.block-1{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}
.block-2{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}
.block-3{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}
.block-4{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}
<div class="block-1">
1 блок
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>
<div class="block-2">
2 блок
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>
<div class="block-3">
3 блок
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>
<div class="block-4">
4 блок
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>