Всплывающее изображение при наведении

[xSPiRiTx]

Есть HTML список. Хочу сделать так, чтобы при наведении на пункт всплывало соответствующее изображение заданных размеров. Из обязательных условий - чтобы изображение перемещалось вместе с курсором мыши.
Гуглил, но все что удалось нагуглить - это изображение, которое появляется в определенном месте, а не "бегает" приклеенным к курсору.
Может кто-нибудь сталкивался, дайте ссылку на реализацию подобной фичи.

[Switch74]

https://jsfiddle.net/yjdenoL3/

[xSPiRiTx]

Благодарю! То, что нужно, но..... 

Очень жаль, что у меня картинка уплыла куда-то в дальние края. А связано это с особенностями моего списка:

<ul class="list2b">
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>  
</ul>

.list2b {
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list2b li {
    position: relative;
    border: 2px solid #DDDDDD;
    background: #FAFAFA;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list2b li:hover {
    background: #F0F5FB;
    border: 2px solid #ADCEE9;
}
.list2b li:before {
    line-height: 32px;
    position: absolute;
    top: 4px;
    left:-40px;
    width:40px;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    background: #77AEDB;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.list2b li:hover:before {
    width:46px;
    background: #337AB7;
}
.list2b li:after {
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #77AEDB;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}
.list2b li:hover:after {
    margin-left: 6px;
    border-left-color: #337AB7;
}

 

 

Пробовал margin свойствами у .hover_img img в пикселях задать позиционирование к курсору, но на разных дисплеях картинка в разные места уплывает.

Edited May 29, 2019 by xSPiRiTx

[Switch74]

position: relative; для .list2b li уберите

[xSPiRiTx]

Да, но тогда у списка синие стрелки слева отваливаются 

[Switch74]

Попробуйте так
https://jsfiddle.net/tws6f9xk/

[xSPiRiTx]

Вооооо!!! Благодарю еще раз! Теперь всё отлично! Лови плюс.

Блин. Если самый последний пункт в списке внизу страницы, то картинка под курсором становится не видна, прячется за границы экрана 

Edited May 29, 2019 by xSPiRiTx