Проблема с hover?

Question

[Dan2013]

У меня появилась проблема у меня есть картинка при ховере она должна становится прозрачной и на ней появляется текст Но когда я навожу мышку на текст hover атрибут уходит с картинки.

Answer 1

[drawnofmymind]

эх,код бы посмотреть(
ну а вообще,текст через translateX/Y()

Comments

[Dan2013]

<div class="orange">
	<img src="assets\hair-dress.png">
		<h2>adsdasdasd</h2>
  </div>

.orange:hover h2{
	opacity: 0.7;
	
}

.orange h2{
	position: absolute;
	top:50%;
}

Что-то вроде этого

Answer 2

[FinGanapre]

Заверните картинку и текст в div. По ховеру на этот див меняйте стили картинки и текста.
Например так
Для вывода текста можно сделать ещё одну подложку и применить к ней фон. Тут много вариантов.

В вашей реализации ховер проподает т.к. вы отслеживаете его у картинки. Как только картинку закрывает текст - событие ховер с неё уходит.

Answer 3

[Froggyweb]

Hover надо не на картинку ставить, а на обертку

Comments

[Dan2013]

Да но мне у меня background картинки Оранжевого цвета, мне нужно чтоб он не становился прозрачным

[Froggyweb]

делаешь скриншоты как надо. Выкладываешь свой код в песочницу получаешь ответ. Все про вроде.

[FinGanapre]

Dan2013, Если я правильно понял, то нужно что-то типа того

[Froggyweb]

FinGanapre, ну там все есть и html и css ^)
сделай так же

[FinGanapre]

Froggyweb, Ну, раз мой верхний вариант человека не устроил, где, как и сказано в вопросе, картинка должна становиться прозрачной, то остаётся только этот вариант. Если проблема с фоном за картинкой. У меня других вариантов нет:)

[Froggyweb]

Блин тебе сложно прикрепить картинку как должно быть и твой код. ну извини.

[FinGanapre]

Froggyweb, Видимо, тут небольшая путаница. Это не мой вопрос:)

Answer 4

[VVS10]

top: 50%;
left: 50%;
transform: translate(-50%, -50%);