Css thumbnails hover issue in wordpress

Question

Я работаю здесь http://tinyurl.com/a74ko2o, это магазин электронной коммерции, основанный на wordpress, и моя проблема находится на одной странице продукта, css, проектирующей на этой странице ссылок, вы, ребята, можете увидеть эскизы под большим изображением на hover thumbnails показывает сплошную красную границу

Я добавляю этот эффект, но теперь проблема в том, когда он зависает, изображение движется вниз и не фиксируется. мне нужно, чтобы это исправить, точно как этот сайт http://emporium.premiumcoding.com/demo.php

CSS здесь для миниатюр

.leftcontentsp .thumbnails img { 
    border: 4px solid #343434; 
    height: 92px; 
    margin: 5px 4px 8px 0; 
    width: 92px; 
} 

на парении

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover { 
border: 5px solid #d00000; 
} 

пожалуйста помочь исправить эту проблему CSS, спасибо заранее

Answer 1

Проблема в том, что при добавлении 5px широкой границы после 4px шириной вы получаете 1px разность th при перемещении изображения вниз. Мы можем исправить это мое добавление и удаление отступов, поэтому изображение остается на месте:

.leftcontentsp .thumbnails img { 
    border: 4px solid #343434; 
    height: 92px; 
    margin: 5px 4px 8px 0; 
    width: 92px; 
    padding: 1px; 
} 

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover { 
    border: 5px solid #d00000; 
    padding: 0; 
} 

Или, если это ошибка, просто сделать границы такой же широкий, как на :hover по нормали.

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover { 
    border: 4px solid #d00000; 
} 

Answer 2

увидеть разницу мужчин

дают ширина же граница

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover { 
border: 4px solid #d00000; 
} 

, как в естественном состоянии

1px мешающего

и это для

переход на зависание

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover { 
    border: 4px solid #d00000; 
-webkit-transition: all 0.25s ease-in-out; 
     -moz-transition: all 0.25s ease-in-out; 
     -o-transition: all 0.25s ease-in-out; 
     -ms-transition: all 0.25s ease-in-out; 
     transition: all 0.25s ease-in-out; 
    }