JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div class="container">
   <div class="fotos">
    <img src="https://source.unsplash.com/uAgLGG1WBd4/900x900" alt="" data-indice='1'>
    <img src="https://source.unsplash.com/Cp-LUHPRpWM/900x900" alt="" data-indice='2'>
    <img src="https://source.unsplash.com/7BjmDICVloE/900x900" alt="" data-indice='3'>
  </div>
</div> 
<div id="fotosola1" class='fotoA'></div>
<div id="fotosola2" class='fotoA'></div>
<div id="fotosola3" class='fotoA'></div>

CSS

*{
  margin:0px;
  padding:0px;
}
.container{
  width:100%;
  height:100vh;
  display:flex;
  align-items: center;
  justify-content:center;
}
.fotos img{
  width:200px;
  height:200px;
}
.fotoA{
  width:10px;
  height:10px;
}
#fotosola1{
  position:absolute;
  background-image: url("https://source.unsplash.com/uAgLGG1WBd4/900x900");
  background-size:cover;
  object-fit:contain;
  top:-50%;
  left:-50%;
  width:100%;
  height:100%;
}
#fotosola2{
  position:absolute;
  background-image: url("https://source.unsplash.com/Cp-LUHPRpWM/900x900");
  background-size:cover;
  object-fit:contain;
  top:-50%;
  left:-50%;
  width:100%;
  height:100%;
}
#fotosola3{
  position:absolute;
  background-image: url("https://source.unsplash.com/7BjmDICVloE/900x900");
  background-size:cover;
  object-fit:contain;
  top:-50%;
  left:-50%;
  width:100%;
  height:100%;
}
div.fotoA{
  transform: scale(0.2); 
  transition: all 1s ease-in;
}
#fotosola1.arriba ,#fotosola2.arriba ,#fotosola3.arriba{
  height: 100vh;
  top: 0;
  left:0;
  transform: scale(2,2); 
}

JavaScript

$(document).ready(function (){
	$('img').click(function (){
  	
    var i = $(this).attr('data-indice')
    console.log("click"+i)
  	$('#fotosola'+i).addClass('arriba');
  })
  
  $('.fotoA').click(function (){
  	$('.fotoA').removeClass('arriba');
  })
})