My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the specific styling concerns:
/* Styling for the image and text container */
* {
margin: 0;
padding: 0;
}
/* Styling for the text within the images" */
.text-block {
position: absolute;
top: 5%;
left: 5%;
color: black;
}
/* Styling for all four images */
.img {
width: 100%;
border-radius: 30px;
filter: drop-shadow(0 0 0.5rem grey) opacity(60%);
}
.zoom {
margin: 10px;
transition: transform .5s;
}
.zoom:hover {
transform: scale(1.1);
z-index: 1;
}<!-- Bootstrap-5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358465844">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e203e22">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Body -->
<div class="row g-0">
<!-- "Applications" square -->
<div class="col-lg-6 col-sm-12">
<div class="zoom">
<a href="./candidatures.php">
<img src="https://via.placeholder.com/1920x1080.png" class="img" alt="meeting">
<div class="text-block">
<h4 class="big">Your applications</h4>
<p class="medium">Keep track of your applications here.</p>
</div>
</a>
</div>
</div>
<!-- "Offers" square -->
<div class="col-lg-6 col-sm-12">
<div class="zoom">
<a href="./offers.php">
<img src="https://via.placeholder.com/1920x1080.png" class="img" alt="shake">
<div class="text-block">
<h4 class="big">Current offers</h4>
<p class="medium">Check out the latest offers here.</p>
</div>
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 col-sm-12">
<!-- "Companies" square -->
<div class="zoom">
<a href="./companies.php">
<img src="https://via.placeholder.com/1920x1080.png" class="img" alt="corporations">
<div class="text-block">
<h4 class="big">Companies</h4>
<p class="medium">Explore various companies here.</p>
</div>
</a>
</div>
</div>
<!-- "Personal Information" square -->
<div class="col-lg-6 col-sm-12">
<div class="zoom">
<a href="./companies.php">
<img src="https://via.placeholder.com/1920x1080.png" class="img" alt="paper">
<div class="text-block">
<h4 class="big">Personal Information</h4>
<p class="medium">Update your personal information here.</p>
</div>
</a>
</div>
</div>
</div>