CSS | Text Over Image using CSS

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

<!DOCTYPE html>
<title> CSS – Insert Text Over Image using CSS</title>
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#8221; rel=”stylesheet” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>
<link href=”https://fonts.googleapis.com/css?family=Miriam+Libre&#8221; 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;

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s