JSFiddle - React, Tailwind, and code Playground
HTML
<div id="focused_image"></div>
<div id="blurred_image"></div>
CSS
#blurred_image {
position : absolute;
width : 240px;
height : 360px;
top : 0;
left : 0;
display : block;
background: transparent url(http://www.macrobild.de/Fotografie/Landschaft;focus=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_14778608&path=image.action&frame=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_14778608?id=29996690&width=550&height=550&crop=true
) -240px 0 no-repeat;
}
#focused_image {
position : absolute;
width : 240px;
height : 360px;
top : 0;
left : 0;
display : none;
background: transparent url(http://www.iphoneography.com/storage/BlurredPhoto_1_140709.jpg?__SQUARESPACE_CACHEVERSION=1247609370791) 0 0 no-repeat;
}
JavaScript
jQuery(function ($) {
$('#blurred_image, #focused_image').bind('click', function () {
$('#blurred_image, #focused_image').fadeToggle(1500, function () {
//this callback function could be used to show a message or whatever else...
});
});
});