• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Transition, transform i ułożenie zdjęć na stronie.

Aruba Cloud - Virtual Private Server VPS
0 głosów
275 wizyt
pytanie zadane 18 marca 2020 w HTML i CSS przez fluffyuniverse Nowicjusz (140 p.)

Hej, jestem dopiero początkująca jeśli chodzi o CSS i potrzebuję pomocy z ułożeniem zdjęć tak jak na obrazku poniżej, żebym mogła później wykorzystać efekty transform i transition. Jak na razie nie mam nawet pomysłu, co zrobić żeby te zdjęcia były tak ułożone :/ 
Proszę chociaż o małe podpowiedzi. Wklejam swój kod HTML. 

<!DOCTYPE html>
<html>
<head>
	<title>Zadanie</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="zadanie.css">
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
	<!--pobrane z https://fonts.google.com -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>
<body>
		<div class="container">
			<header>
				<h1>Chińskie zabytki</h1>
			</header>
			<div class="postcard">
				<div class="photo1">
					<a href="#"><img src="photo1.jpg" alt="photo of ..."></a>
				</div>
				<p>Lorem Ipsum</p>
			</div>
			<div class="postcard">
				<div class="photo2">
					<a href="#"><img src="photo2.jpg" alt="photo of..."></a>
				</div>
				<p>Lorem Ipsum</p>
			</div>
			<div class="postcard">
				<div class="photo3">
					<a href="#"><img src="photo3.jpg" alt="photo of ..."></a>
				</div>
				<p>Lorem Ipsum</p>
			</div>
			<div class="postcard">
				<div class="photo4">
					<a href="#"><img src="photo4.jpg" alt="photo of ..."></a>
				</div>
				<p>Lorem Ipsum </p>
			</div>
		</div>
</body> 
</html>

komentarz 18 marca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

1 odpowiedź

+1 głos
odpowiedź 19 marca 2020 przez frostify Mądrala (5,640 p.)

Zrobiłem przykładowy efekt starając się używać najprostszych metod:

https://codepen.io/frostify/pen/bGdjwqR

komentarz 19 marca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

super to wygląda, tylko w niektórych miejsca tytuły zakrywają się za inne zdjęcia, jeśli chcesz uniknąć tego efektu poszperaj przy atrybucie z-index 

komentarz 19 marca 2020 przez frostify Mądrala (5,640 p.)
Dzięki.

Wiem :)

Jednak na pożądanym efekcie przy zapytaniu tytuły też są przykryte,

więc nie robiłem 'lepiej' niż miało być.

Podobne pytania

0 głosów
1 odpowiedź 307 wizyt
pytanie zadane 16 maja 2021 w HTML i CSS przez Tetsu99 Nowicjusz (200 p.)
0 głosów
2 odpowiedzi 235 wizyt
pytanie zadane 20 września 2017 w HTML i CSS przez mola85 Początkujący (320 p.)
0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 25 czerwca 2018 w HTML i CSS przez grands14320 Obywatel (1,080 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...