JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="clearfix">
<ul id="gallery">
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        1
        </div>
    </li>
    <li id="conejo">
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        2
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        3
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        4
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        5
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        6
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        7
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        8
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        9
        </div>
    </li>
    <li>
        <img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
        <div class="holder">
        10
        </div>
    </li>
   ...

CSS

body{background:#333}
*{margin:0; padding:0}
#container{position:relative; background:white;  margin:0 auto}
ul#gallery{margin:0}
ul#gallery li{float:left; list-style:none; margin-right:20px}
ul#gallery li img{width:150px}
ul#gallery li .holder{width:400px; height:400px; background:rgba(0,0,0,0.8); position:absolute; display:none; z-index:50}
ul#gallery li:hover .holder{display:block}

.holder{font-size:133px; text-align:center; line-height:300%; color:white}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

JavaScript

$(document).ready(function(){
    
    alert("Ready")
    // width of the container
    var cont_width = 960;
        
    // margin from the image to the hover block
    var lateral_margin = 20;
    
    // not necessary to touch
    var cont_height = $('#container').height();
    
    
    $('#container').css('width', cont_width);
    
    $('img','#gallery li').each(function(){
        $(this).bind({
            mouseover: function(){    
                if($(this).position().left + $(this).width() + $(this).next('.holder').width() < cont_width){
                    $(this).next('.holder').css({'left': $(this).position().left + $(this).width() + lateral_margin, 'right':'auto'});
                    
                    
                } else {                    
                    $(this).next('.holder').css({'right': cont_width - $(this).position().left + lateral_margin, 'left':'auto'});
                } 
                
                
                
                if(($(this).position().top < cont_height) && ($(this).position().top > 0)){
                    $(this).next('.holder').css({'top': $(this).position().top + $(this).height() - $(this).next('.holder').height()/2, 'bottom': 'auto'} );
                    
                } else if($(this).position().top < $(this).next('.holder').height()){
                    $(this).next('.holder').css({'top': 0, 'bottom':'auto'}); 
                    
                } 
                if($(this).position().top + $(this).next('.holder').height() > $('#container').height() - $(this).height() ){
                    $(this).next('.holder').css({'bottom': 0, 'top':'auto' });
                    
                    
                }
                
                
                
            }
        });
        
    });
    
    
    
});