Как сделать, так чтобы при наведении курсора бордеры меняли цвет?

Question

[alashgrand]

Здравствуйте!
Как сделать, так чтобы при наведении курсора бордеры меняли цвет на другой (например на черный), а также сделать размеры картинок поменьше и расположить картинки с бордюром (друг с другом) поближе? Что-то пока не получается у меня в этом блоке

.upsells .products .item-image img {
    border: 1px solid #e8e8e8;
}

Comments

[Алексей]

.upsells .products .item-image img:hover { /* псевдо-класс :hover применяет стили при наведении на элемент */
    border-color: #fff; /* Свойство меняет цвет бордера */
}

[alashgrand]

Алексей, Да, спасибо! а картинку поменьше и расположить картинки с бордюром (друг с другом) поближе?

[Алексей]

alashgrand, надо, чтобы при наведении изменяли размер и отступы?

[alashgrand]

Алексей, нет не при наведении, при наведении все сделал. Видите на скриншоте? Там отступы меньше и картинку меньше

[alashgrand]

alashgrand, Алексей, аа еще забыл про адаптивность

[alashgrand]

Алексей,

.upsells .products .item-image img{
    border: 1px solid #e8e8e8;
}

.upsells .products .item-image img:hover {
    border: 1px solid #616161;
	-webkit-transition: 0.5s; 
}

.upsells .products .product .item-info {
    position: relative;
    display: none;
}

ul.products {
    position: relative;
    min-height: 0px;
}

Answer 1

[profesor08]

:hover, margin

Answer 2

[alashgrand]