Что это за эффект css у блока?

Question

[Roddrigo]

Добрый день всем. Я человек который относительно недавно стал изучать веб программирование, и вопрос скорее связан с моей неопытностью, нежели глупостью. Подскажите пожалуйста, как можно узнать что это за эффект на блоках на сайте (https://studia-remontov.ru) в разделе цены. При наведении мыши блок осветляется а снизу под блоком появляется типа проекции. Пробовал реализовать через добавление блоку тени повторяющейся, но что-то хрень какая-то вышла... Буду крайне признателен за помощь.

Answer 1

[Кирилл]

при :hover меняется background-color и добавляется box-shadow

Answer 2

[Mr Crabbz]

из devtools хрома:

.border {
    transition: .5s;
}
.border:hover {
    box-shadow: 0 40px 0 -30px #cecece, 0 80px 0 -60px #a7a7a7;
}

Answer 3

[Gortyser]

Таки тень, что не получилось-то?

Answer 4

[frees2]

Фиксация (нажатия) ссылки, кнопки как улучшить?
Писал же, спрашивал, так игнорируют, сложность почему то поменяли со сложной на среднюю...
Работает во всех браузерах, тени тоже работают.
Можно поиграться с тенями и фоном ( и без блока, можно с блоком)

button,[role="button"] {cursor: pointer;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"] {  background-color:  #CAE8CA; transition-property: background-color;transition-duration: 0.4s;}

:active, :hover, :focus { outline: 0; outline-offset: 0;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"]:focus  {     background-color:   rgba(204,204,255, 0.9);}
[role="button"]:active { background-color: #bbb;}

Answer 5

[Fl_SparkyBooMan]

Советую прочитать о псевдо-классах в htmlbook.ru .Этот эффект создается когда, к элементу например div или в основном a присваивается в стилях CSS псевдо-класс ":hover" и выглядит это так:
HTML
Ссылка с классом link
CSS
.link:hover { //присваивает стили при наведении мыши
color: #ccc; //меняет цвет текста
border-bottom: 1px solid #000; //меняет подчеркивание, в частности его цвет и толщину
}