I am currently working on creating a responsive grid using HTML and CSS. My goal is to have the text 'Top left' displayed within the image, similar to the example shown at https://www.w3schools.com/howto/howto_css_image_text.asp. However, I am facing difficulties achieving this while maintaining the responsiveness of the grid. Here is the HTML code I am using:
<html>
<head>
<style>
/* Font */
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
/* Rest of the CSS code... */
</style>
</head>
<body>
<div class="main">
<h1>Responsive Card Grid Layout</h1>
<ul class="cards">
<li class="cards_item">
<div class="card">
<div class="image_wrapper"><img src="https://picsum.photos/500/300/?image=10"><p class="top_left">Top Left</p></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Some text</p>
<p class="card_text">Some more text</p>
</div>
</div>
</li>
<li class="cards_item">
<div class="card">
<div><img src="https://picsum.photos/500/300/?image=5"></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
</div>
</div>
</li>
<!-- More grid items... -->
</ul>
</div>
</body>
</html>I would appreciate any assistance with this issue. Thank you.