Tło z napisem do każdego obrazka

pytanie zadane 2 sierpnia 2016 w HTML i CSS przez Barttyyy Gaduła (4,680 p.)

Witam, robię taki "pokaz" zdjęć na mojej stronie:

z takim kodem:

.cont1 {
	position: relative;
	width: 300px;
	height:  250px;
	background: url('pokaz1.jpg');
	background-size: 100%;
	margin-left: 250px;
	margin-top: 150px;
	border: 3px solid #ffffff;
}
 
.cont1 span.text {
	position: absolute;
	top:105px;
	left: 50px;
	opacity: 0;
	color: #ffffff;
	font-size: 30px;
}
 
.cont1 .overlay1 {
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	opacity: 0;
	width: 100%;
	height: 100%;
}
 
.cont1:hover span.text {
	opacity: 1;
}
 
.cont1:hover .overlay1 {
	opacity: 0.6;
}

	<div class="cont1">
		<div class="overlay1"></div>
			<span class="text">Retusz portretów</span>
		</div>

Czy do każdego kolejnego zdjęcia muszę zmieniać na "cont2" "overlay2" i "text2"? Czy da się to jakoś inaczej załatwić>

1 odpowiedź

odpowiedź 2 sierpnia 2016 przez DL TD Nałogowiec (36,710 p.)
edycja 2 sierpnia 2016 przez DL TD

Oczywiście, że idzie ;) Do następnego obrazka znowu deklarujesz te same klasy. Lepiej usunąć z ich końca nazwy cyfrę "1" gdyż w taki sposób będzie to po prostu ładniejsze.

EDIT: Zapomniałem jeszcze dodać, że jeśli chcesz zmodyfikować obecną klasę (np. zmienić domyślne zdjęcie) to wystarczy zapisać to w atrybucie style ;) Ale to jest trochę bezsensu skoro możesz korzystać z tagu img i background z klasy (w tym przypadku już .cont) wywalić.

komentarz 2 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

przy każdym innym przykładzie przeróbki przed i po, zmieniam zdjęcie i parametry np. ustawienie, rozmiary, tekst wyświetlany po najechaniu kursorem, więc nie wiem do końca jak mogę to zrobić bez zmiany w CSSie

komentarz 2 sierpnia 2016 przez DL TD Nałogowiec (36,710 p.)

Po pierwsze tak jak napisałem używasz tagu <img> i problem z głowy, dodajesz do niego odpowiednie atrybuty, które są ci potrzebne (np. wysokość, szerokość itd.) jeśli chodzi o tekst po najechaniu kursorem zostaw tego span'a. CSS w tym przypadku jest zbędny ;)