Kirilbl4,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.n_p{
height: 50px;
width: auto;
}
.f_p{
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
position: absolute;
height: 80%;
width: auto;
}
.show{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$(".n_p").on("click", function() {
var i = $(".n_p").index(this);
$(".f_p").not($(".f_p").eq(i).addClass("show")).removeClass("show")
})
})
</script>
</head>
<body>
<img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="n_p" alt="" />
<img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="n_p" alt="" />
<img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="f_p show" alt="" />
<img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="f_p" alt="" />
</body>
</html>