This is not the full answer (some css is needed to do it beautifully), but:
JS:
$(".mix").click(function(){
var photoSrc = $(this).find("img").attr("src");
$(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /></div>");
});
CSS:
.container .mix{
position: relative;
display: inline-block;
}
.photo_medias{width:233px;height:133px}
.big-img-cont{
position: absolute;
top:0px;
left:0px;
}
.big-img-cont img{
width:706px;height:364px
}
EDIT:
regarding your second question (in your comment), you can do something like:
JS:
$(".mix").click(function(){
var photoSrc = $(this).find("img").attr("src");
$(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /><a class='close-img' href='javascript:void(0);'>close</a></div>");
});
$(document).on( "click", ".close-img", function(){
$(".big-img-cont").remove();
} );