opacity na obrazku + tekst

<div class="work" id="work-1">
	<div class="overlay">
	<div class="work-content">
		Lorem Ipsum
		
		</div>
		</div>
	</div>

#work-1
{
	background-image: url('images/foto_4.jpg');
	background-size:cover;
	width:25%;
	height:220px;
}
.work{
	float:left;
}
.work-content{
	width:100%;
	height:100%;
	opacity:0;
	text-align:center;
}
.work-content:hover{
	opacity:0;
}
.overlay{
	width:100%;
	height:100%;
background:black;
opacity:0;
}
.overlay:hover{
	opacity:0.7;
}

Mam taki problem, że tekst po najechaniu na div tekst ma opacity 0.7 a tego nie chce. Jak to naprawić??

Skoro ustawiasz przejrzystość całego bloku na 70%, to oczywiste jest, że dotyczy to także wszystkich dzieci.

Jaki efekt konkretnie chcesz osiągnąć?
Być może lepiej w Twoim przypadku będzie wykorzystać background-color: rgba(...) na przykład.

tak też zrobiłem, dzięki
Mam jeszcze jedno pytanie odnośnie takiego efektu:

aleszanik napisał(a):

tak też zrobiłem, dzięki
Mam jeszcze jedno pytanie odnośnie takiego efektu:

Czy lepiej robić na na podstawie podmiany zdjęć czy w css?

Że pojawiające się ikonki mediów społecznościowych? To wystarczy ustawić je prawidłowo tak jak chcesz i dać im

display: none;

Następnie dla zdjęcia:hover czyli po najechaniu display aby się pojawiało. Nie robi się tego podmieniając fotki, bo jak dodasz odnośniki do takich okrągłych ikon? Przecie to bez sensu.