Полупрозрачный градиент поверх изображения

[hetsketch]

Всем привет! Такой вопрос: как при наведении на <img> наложить полупрозрачный градиент средствами CSS поверх картинки?

Структура HTML такая: 

<div class="item">
	<img src="/img/about-us-1.png" alt="#">
</div>

Пример: справа - нормальная картинка, слева при наведении.

Edited November 17, 2016 by hetsketch

[wwt]

Прописать

background-image: linear-gradient ();

для слоя выше картинки. Слой можно сделать с помощью ::before, к примеру.

[npofopr]

Примерчики

http://tympanus.net/Development/HoverEffectIdeas/
http://fox-hover.co.uk/intermediate-hover-pack/

[green-vik]

тоже как вариант 

.item {
  /* стиль для блока */
}
.item img {
  /* стиль для картинки */
}
.item img:hover {
  /* стиль для картинки при наведении на неё */
}

 

[Switch74]

сделайте .item:hover:after{} и фигачте какие вам нужно градиенты в него

[green-vik]

6 минут назад, Switch74 сказал:

сделайте .item:hover:after{} и фигачте какие вам нужно градиенты в него

а не правильнее сделать так?

.item {
  /* стиль для блока */
}
.item img {
  width:250px;
  height:220px;
}
.item img:hover {
  width:240px;
  height:210px;
  margin-left:-10px;
  margin-top:-10px;
  -webkit-box-shadow: 10px 10px 2px 0 rgba(0,255,255,0.7) ;
  box-shadow: 10px 10px 2px 0 rgba(0,255,255,0.7) ;
}

 ах, да, забыл ,а поверх картинки наложить прозрачный градиент

Edited November 17, 2016 by green-vik

[npofopr]

Судя по картинкам, у него там два слоя. 
Сама картинка и слой с текстом. При ховере, слой с текстом надо отображать, с эффектом появления и "ухода" влево-вверх.

Простой ховер на картинку не спасёт, думаю.

[Switch74]

возможно, но
1. где градиент?
2. при наведении на картинку в нижнем правом углу картинка начнет дергаться - мне кажется это не очень хорошо

[hetsketch]

Ребят, спасибо всем! Я даже не ожидал, что тут так быстро отвечают. Воспользовался советом @Switch74. @npofopr, спасибо за годные примеры!

Возник еще такой вопрос: как лучше разместить текст с иконкой? Если бы просто текст, то понятно. Пихаешь в content и все. А как туда добавить ещё и иконку(шрифтовую)?

[Switch74]

можете вставить в content '<span class="icon"></span>text'
можно было бы через background, если бы обычная картинка
или через <svg> если есть такая возможность
да и если у вас иконка шрифтовая, вставляйте как есть  вместе с текстом

[npofopr]

Чего ж вы так все в 2 слоя то не хотите сделать? :-) 

[hetsketch]

@npofopr, вы имеете в виду на одном слое градиент, а на 2м иконка с текстом?

[npofopr]

4 минуты назад, hetsketch сказал:

@npofopr, вы имеете в виду на одном слое градиент, а на 2м иконка с текстом?

имею так https://jsfiddle.net/npofopr/auhdq3bq/

[hetsketch]

@npofopr, хм, мне кажется, что ваш вариант даже лучше. В смысле гибкости больше, во внутренний див можно поместить всё что угодно.