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

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>