CSS
6 Ways to Deal with Text Over Images
index.html
<!-- AZUL CODING --------------------------------------- -->
<!-- CSS - 6 Ways to Deal with Text Over Images -->
<!-- https://youtu.be/NiBKzubl1_Y -->
<!DOCTYPE html>
<html>
<head>
<title>Azul Coding</title>
<style>
body {
margin: 40px;
background-color: #004961;
}
* {
font-family: 'Inter', sans-serif;
color: white;
}
h2 {
margin: 15px 0 5px 20px;
}
p {
font-size: 16px;
margin: 0 0 20px 20px;
}
.card {
width: 300px;
height: 250px;
background-color: black;
border-radius: 15px;
box-shadow: 0 0 10px rgb(0, 0, 0, 0.4);
display: flex;
/* For more photos taken by me: https://www.johnjds.co.uk/quetzal */
background-image: url(https://images.unsplash.com/photo-1655808778147-4f953cd797ff?auto=format&fit=crop&w=1020);
background-size: cover;
background-position: bottom;
}
.content {
height: 100%;
width: 100%;
border-radius: 15px;
display: flex;
}
.text-overlay {
margin-top: auto;
width: 100%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* 1. Tinted image background */
.content {
background-color: rgb(0, 0, 0, 0.6);
transition: 0.5s;
}
.card:hover .content {
background-color: rgb(0, 0, 0, 0.4);
}
/* 2. Tinted text overlay */
.text-overlay {
background-color: rgb(0, 0, 0, 0.6);
}
/* 3. Blurred text overlay */
.text-overlay {
background-color: rgb(0, 0, 0, 0.3);
backdrop-filter: blur(20px);
}
/* 4. Gradient overlay */
.content {
background: linear-gradient(0deg, black, rgb(0, 0, 0, 0.01));
}
/* 5. Tinted text background */
h2, p {
display: inline-block;
padding: 5px 10px;
background-color: rgb(0, 0, 0, 0.6);
}
h2 {
margin-bottom: 0;
}
/* 6. Text shadow */
h2, p {
text-shadow: 0 0 5px black;
}
.content {
background-color: rgb(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="card">
<div class="content">
<div class="text-overlay">
<h2>Card Title</h2>
<p>This is an example card</p>
</div>
</div>
</div>
</body>
</html>
