Показать крупную иллюстрацию после того, как наведите курсор на ссылку

Question

У меня есть магазин на Prestashop 1.6. Я создал третий вид в списке продуктов. С одной стороны, я не могу справиться сам. Когда вы перемещаете курсор над изображением (в третьем представлении), он отображается рядом с ним с большими размерами, и это нормально. Как я могу переместить это изображение немного больше вправо. Если я использую margin-left или padding-left, изображение мигает. Надеюсь, ты знаешь, что я имею в виду.

<div class="left image"> 
    <a href="#"> 
<img class="replace-2x img-responsive" src="/1-home_default/faded-short-sleeve-tshirts.jpg" width="250" height="250"></a></div> 

.left { 
    float: left; 
    margin-left: 10px; 
} 
.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 
.image{ 
    width:32px; 
    height:32px; 
} 

.image a:hover img{ 
    display: block; 
    position: absolute; 
    z-index: 999; 
} 

Спасибо за помощь. С уважением

Answer 1

Попробуйте использовать невидимую рамку на изображении, которое загружается.

border-left: 10px transparent; 

Это должно дать вам необходимое пространство и остановить мигание, возникающее при использовании поля. Однако изображение будет отображаться при падении этой границы. Это действительно зависит от того, какой результат вы желаете.