JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toz"></div>

<div class="post-457 post type-post status-publish format-image hentry category-uncategorized first zobi current" id="post_457"><img width="960" height="640" src="http://blog.dansayag.com/wp-content/uploads/2013/03/tumblr_mk2ogjCZrr1s99q5ro1_1280.jpg" class="attachment-large" alt="" /></div>

<div class="post-451 post type-post status-publish format-image hentry category-active dispa" id="post_451"><img width="682" height="1024" src="http://blog.dansayag.com/wp-content/uploads/2013/05/tumblr_mlxohdQ1o11s99q5ro1_1280-682x1024.jpg" class="attachment-large" alt="" /></div>
<!--
<div class="post-448 post type-post status-publish format-image hentry category-active dispa" id="post_448"><img width="920" height="613" src="http://blog.dansayag.com/wp-content/uploads/2013/10/tumblr_mu9wgfrNmp1s99q5ro6_1280.jpg" class="attachment-large" alt=""/></div>
-->
<div class="post-448 post type-post status-publish format-image hentry category-active dispa" id="post_448" style="display: none;"><img width="920" height="613" src="http://blog.dansayag.com/wp-content/uploads/2013/10/tumblr_mu9wgfrNmp1s99q5ro6_1280.jpg" class="attachment-large" alt=""/></div>

<div class="post-371 post type-post status-publish format-image hentry category-active last" id="post_371" style="display: block;"><img width="960" height="639" src="http://blog.dansayag.com/wp-content/uploads/2013/03/tumblr_mk2mmdRfnc1s99q5ro1_1280-1024x682.jpg" class="attachment-large" alt="Sofia. Jordan River. Me sitting in the fire - mon coude contre le rocher. Sofia, la plus * des belles Sofias. Il y’avait des champs parsemés de ronces à traverser parfois, des champs de blés encore inaccédés** qu’on a bien-sur traversés, de magnifiques champs, plein d’épis dans les cheveux; les champs dansent entre le souvenir de la Palestine. 

*apparemment il manque un mot.

**apparemment ce mot n’existe pas.

***apparemment celui là est au pluriel.

****apparemment il ne manque pas qu’un mot.

Barbecue****."></div>

CSS

html {
    background-color:green;
}
}
.zobi{
    width: 100%;
height:100%;

    
}
.zobi img{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
       z-index:1;
}

.dispa{ display:none;}

#toz {
    z-index:2;
    position:absolute;
    top:0;
    left:0;
    height:150px;
    width:150px;
    background-color:red;
}

JavaScript

var imgSrc=$('.zobi img').attr('src');
$('.zobi img').remove();
$('.zobi').html('<div class="backbg"></div>');
$('.backbg').css('background-image', 'url(' + imgSrc + ')');
$('.backbg').css('background-repeat','no-repeat');
$('.backbg').css('background-size','cover');
$('.backbg').css('background-position','50% 50%');
$('.backbg').css('width','100%');
$('.backbg').css('height','100%');
$('.backbg').css('position','fixed'); 
$('.backbg').css('top','0'); 
$('.backbg').css('right','0'); 
$('.backbg').css('bottom','0'); 
$('.backbg').css('left','0'); 

$('#toz').click(function(){
    var imgSrc=$('.dispa img').attr('src');
    $('.dispa').html('<div class="backbg"></div>');
    $('.dispa img').remove();
    $('.backbg').css('background-image', 'url(' + imgSrc + ')');
    $('.backbg').css('background-repeat','no-repeat');
    $('.backbg').css('background-size','cover');
    $('.backbg').css('background-position','50% 50%');
    $('.backbg').css('width','100%');
    $('.backbg').css('height','100%');
    $('.backbg').css('position','fixed'); 
    $('.backbg').css('top','0'); 
    $('.backbg').css('right','0'); 
    $('.backbg').css('bottom','0'); 
    $('.backbg').css('left','0'); 
    next = $('.current').next();
    current = $('.current');
    current.hide();
    current.removeClass('current');
    next.addClass("current");
    next.addClass("zobi");
    next.removeClass("dispa");
    next.fadeIn("25").delay(25).show();
    
 //$('.current').removeClass('current').hide().next().fadeIn('25').delay(25).show().addClass('zobi').removeClass('dispa');
    if ($('.current').hasClass('last')) {
        $('.current').removeClass('current')
	  /* $('#next').attr('disabled', true);*/

    }
    $('#prev').attr('disabled', null);
});