Настройка Thumbnails

12
Neumann1970
На сайте с 28.05.2017
Offline
48
635

Всем привет!

Не подскажите как реализовать эти фишки:

1. Добавить маркировку скидки в левом верхнем углу как на картинке.

2. При наведении на картинку (ссылку) - общее забеление фона, появление надписи в середине на черном фоне "Быстрый просмотр".

Напишите пожалуйста что делали, если сталкивались с такой задачей.

Спасибо!

S
На сайте с 30.09.2016
Offline
459
#1

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

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
yet_warm
На сайте с 26.05.2007
Offline
129
#2
Sitealert:
1. Картинка с абсолютным позиционированием.

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

Многие хотят попасть в рай, мало кто хочет для этого умирать.
S
На сайте с 30.09.2016
Offline
459
#3
yet_warm:
Ммм... зачем там картинка? Текстовый блок, стили только подрихтовать.

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

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

Neumann1970
На сайте с 28.05.2017
Offline
48
#4
В простейшем случае можно и текстовый блок. Но не всегда.
Но если там просто цифирки с полосками - то да, согласен.

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

S
На сайте с 30.09.2016
Offline
459
#5
Neumann1970:
Можете привести пример

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

septem7777
На сайте с 28.01.2013
Offline
51
#6

Собирал на коленке за 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/

курсы петрозаводск (http://uc-ok.ru), курсы бухгалтера петрозаводск (http://uc-ok.ru)
Neumann1970
На сайте с 28.05.2017
Offline
48
#7

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

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

septem7777
На сайте с 28.01.2013
Offline
51
#8

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);
}

Neumann1970
На сайте с 28.05.2017
Offline
48
#9

.block{
width: 140px;
height: 280px;
background: #ccc;
position: relative;
overflow: hidden;
}

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

background: #ccc;

на

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

ТАК ???

septem7777
На сайте с 28.01.2013
Offline
51
#10

Neumann1970, да.

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

background-size: contain;

или

background-size: cover;

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

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий