Наложить на низ картинки затемнение, как реализовать?

Question

[Антон Вебсайтовский]

Всем привет, искал и чет не нашел, только при наведении есть эффект срабатывания градиента.
Что я хочу сделать, есть картинка, я хочу наложить на нее градиент сверху чтобы низ фотки затемнялся.

Как реализовать?

<img src="/media/img/111.jpg" title="" alt="">

.ankb img{
  width: 100%;
  min-width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

Answer 1

[WapSter]

Comments

[Антон Вебсайтовский]

Так это у вас при наведении, а надо чтоб без hover было.

[Антон Вебсайтовский]

делал и чет не вышло, обязательно в див оборачивать? просто у меня в тег обернуто. и зачем before, пихать во внутрь стиля,...

[WapSter]

Антон Вебсайтовский, там все стили есть прочти их блин. Я не учитель по вёрстке.

[Антон Вебсайтовский]

Я сделал по другому, ниже написал. все работает.

Answer 2

[Стас Хитрич]

Box shadow inset

Comments

[Антон Вебсайтовский]

а есть пример как реализовать?

[Антон Вебсайтовский]

чет не вышло

.ankb img{
  width: 100%;
  min-width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  -webkit-box-shadow: inset 0px -20px 30px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         inset 0px -20px 30px 0px rgba(50, 50, 50, 0.75);
}

[Стас Хитрич]

Антон Вебсайтовский, возьмите картинку в img-wrapper какой нибудь и к нему тени применяйте. Уже могли бы и нагуглить примеры)
пример прописан image shadow

[Антон Вебсайтовский]

Стас Хитрич, да я уже решил сам ! мне не нужно было при наведении чтобы срабатывало, вроде по Русски написал что надо было ) просто накладывать затемнение на низ картинк.

Answer 3

[Антон Вебсайтовский]

Вот так работает, но надо в див обернуть картинку, низ фото затемнено.

.aki {
  position: relative;
}
.aki::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgb(0, 0, 0, 0.5);
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0, 0.5)), color-stop(30%, rgb(255, 255, 250, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0, 0.5) 0%, rgb(255, 255, 250, 0) 30%);
}