In this tutorial, we'll learn how to add text over an image using CSS. We'll cover how to position the text and style it to make it stand out against the image. Whether you're a beginner looking to learn CSS or a experienced developer looking to brush up on your skills, this tutorial is for you! By the end of the tutorial, you'll be able to add text over images like a pro. So let's get started.
text_over_image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Over Image</title>
<link rel="stylesheet" href="css/text_over_image.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="content-wrapper">
<img src="image/sample.jpg">
<div class="text-wrapper">
<h1>Sample Text</h1>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
overflow: hidden;
background-color: #c4a1a2;
}
.content-wrapper{
width: 80%;
margin: 4% 10% 5% 10%;
}
.content-wrapper img{
width: 100%;
}
.text-wrapper{
width: 100%;
position: relative;
margin-top: -40%;
}
.text-wrapper h1{
text-align: center;
color: #ffffff;
font-size: 10vw;
font-family: 'lobster', cursive;
}
Watch Full Tutorial Video Here!
Comments
Post a Comment