Настройка Thumbnails

1. Картинка с абсолютным позиционированием.

2 Изменение стилей блоков при наведении мыши.

Ммм... зачем там картинка? Текстовый блок, стили только подрихтовать.

В простейшем случае можно и текстовый блок. Но не всегда.

Но если там просто цифирки с полосками - то да, согласен.

Можете привести пример как у вас реализовано???

В стартпосте пример приведён. Кто мешает посмотреть?

Собирал на коленке за 30 секунд, поэтому может не все тонкости уловил, но в целом направление такое может быть. Скидку может разумнее сделать картинкой, но не знаю, в целом CSS сейчас позволяет творить разные чудеса, но в старых браузерах работать чудеса не будут.

Пример без картинки, но картинку можно поставить свойством background: url('http://urldokartinki'); в классе block.

HTML:

<div class="block">

<div class="up">

<button>

Быстрый просмотр

</button>

</div>

<div class="skidka">

100%

</div>

</div>

CSS:

.block{

width: 140px;

height: 280px;

background: #ccc;

position: relative;

overflow: hidden;

}

.up{

display: none;

position: absolute;

z-index: 1;

align-items: center;

justify-content: center;

width: 100%;

height: 100%;

background: rgba(255,255,255,0.8);

}

.block:hover .up{

display: flex;

flex-direction: column;

}

.skidka{

position: absolute;

top:5px;

left: -1rem;

transform: rotate(0.9turn);

background: #fff;

width: 70px;

display: flex;

align-items: center;

justify-content: center;

}

Живой пример:

https://jsfiddle.net/0akn2fjs/1/

О благодарю, буду изучать.

Neumann1970, пожалуйста, разбирайтесь. Если display: none убрать, а заменить на visibility: hidden; то можно еще сделать плавное появление и исчезновение прозрачного фона с кнопкой.

Примерно как это будет выглядеть в css:

.up{
  display: flex;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  
  align-items: center;
  justify-content: center;
  
  width: 100%;
  height: 100%;
  opacity: 0;
  
  background: rgba(255,255,255,1);
  transition: visibility 3s, opacity 0.5s linear;
}

.block:hover .up{
   display: flex;
   visibility: visible;
   opacity: 1;
   flex-direction: column;
   
   background: rgba(255,255,255,0.8);
}

Картинка с часами сюда прописывается через замену:

background: #ccc;

на

background-image: url(images/bg.jpg);

ТАК ???

Neumann1970, да.

еще можно добавить свойство в этот же блок:

background-size: contain;

или

background-size: cover;

чтобы, картинка пропорционально вписалась под размеры блока, каждое свойство по своему это делает.