Kirilbl4,
css учите или ищите
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.n_p{
height: 50px;
width: 100px;
}
.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;
opacity: 0;
position: absolute;
height: 250px;
width: 500px;
}
.show{
opacity: 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>