CSS | Place Text Over Image using CSS

Below HTML code guide you to insert text (Hot Fried Prawns) over the image.

<!DOCTYPE html>
<html>
<head>
<title> CSS – Insert Text Over Image using CSS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#x22; rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre&#x22; rel="stylesheet">
<style type="text/css">
.banner-textimg-section {
text-align: right;
}
.banner-textimg-section > .banner-text {
padding-top: 10em;
padding-right: 5em;
position: absolute;
display: inline-block;
text-align: right;
width: 100%;
}
.banner-textimg-section > .banner-text{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-40%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
.banner-img {
width: 100%;
}
.home-button-section.default-button-link {
font-family: 'Miriam Libre', sans-serif;
text-decoration: none;
color: #F44336;
background: #ffffff;
padding: 6px 20px 2px 20px;
text-transform: none;
font-weight: 600;
font-size: 2.5em;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="banner-textimg-section">
<div class="banner-text pull-right">
<div class="home-button-section default-button-link">Hot Fried Prawns</div>
</div>
<img class="img-responsive banner-img" title="Banner Section" src="sampleimage.jpg" alt="Banner Section">
</div>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s