I am attempting to create an effect where, upon clicking an icon, its background (width and height) expands to 100% of the page. However, I am struggling with ensuring that the 'effect' goes underneath the this.element and above everything else.
I have experimented with changing the position and zIndex properties, but it seems working with a list is a bit more complex..
Below is the code snippet along with a demo.
Html
<ul>
<li style="z-index:1;">
<img src=".png" style="width:100px; height:100px; background-color:#11D1AC;">
</li>
<li style="z-index:1;">
<img src=".png" style="width:100px; height:100px; background-color:#787FA7;">
</li>
<li style="z-index:1;">
<img src=".png" style="width:100px; height:100px; background-color:#FF7059;">
</li>
</ul>
Js
$('li').on('click', function () {
var elementoPos = $(this).find('img').position();
$(this).parent().css("zIndex", 3);
var elementColor = $(this).find('img').css('backgroundColor');
var square = document.createElement('div');
$(square).css({
"position": "absolute"
, "zIndex": "2"
, "width": "50"
, "height": "50"
, "left": elementoPos.left + 50 / 2
, "top": elementoPos.top + 50 / 2
, "backgroundColor": elementColor
});
$('body').append($(square));
$(square).animate({
"width": "100vw"
, "height": "100vh"
, "left": "0"
, "top": "0"
}, function () {
$(square).animate({
opacity: 0
}, 1500);
});
//$('ul').slideUp('slow');
});
Check out the demo: https://fiddle.jshell.net/w4f3aj1z/6/