In this tutorial we are going to make a black overlay on background image using CSS. We will also put text at the center of image to make it look beautiful with the text shadow.
If you want to check the demo click below.
Lets get started
What are we going to do ?
- Prepare a layout with
<div>and class name. - Add some CSS code to achieve our result.
For the majority of this tutorial we are going to use some images and play with the CSS code to achieve the desired result step by step.
We are going to use bootstrap to do the things bit quickly. So, i would suggest you to do the same. You can download bootstrap from here or use the CDNÂ links.
Step 1 : Prepare a layout with <div> and class name
We are going to create a <div> with a class named image_container and add an image with an <img> attribute
Also another <div> is added as a caption text that is used to align it at the center by using the CSS. Take a look at the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="col-md-12 image_container"> <img src="img1.jpg" alt="" title="image1" /> <div class="img_text"><h1>Welcome to Everest</h1></div> </div> </div> <div class="col-md-6"> <div class="col-md-12 image_container"> <img src="img2.jpg" alt="" title="image1" /> <div class="img_text"><h1>Welcome to Annapurna</h1></div> </div> </div> </div> </div> |
Step 2 : Add some CSS code to Achieve the Result.
After adding image and another <div> for the display text inside the center of the image. We are going to put and overlay in the <div> outside the image and change its behavior on hover. Copy and paste the CSS code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.image_container { padding: 0; } .image_container:after { content: '\A'; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.6); opacity: 0.6; transition: all 0.5s; -webkit-transition: all 0.5s; } .image_container:hover { background: rgba(0,0,0,0.0); opacity: 0.9; } .image_container img { width: 100%; height: 300px; } .image_container .img_text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-40%); transform: translate(-50%,-40%); z-index: 1; } .image_container h1 { font-size: 32px; line-height: 36px; font-weight: 700; color: #fff; margin-top: 10px; margin-bottom: 0px; text-align: center; text-shadow: 0px 2px 4px #333; } |
Finally the Full Code
If you have any trouble using it just copy the full code below in order to achieve the result.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="ROBOTS" content="NOFOLLOW,NOINDEX"> <title>How to Create Black Transparent Overlay on Background Image With Text Using HTML & CSS</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <style> .container { margin-top: 30px; } .image_container { padding: 0; } .image_container:after { content: '\A'; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.6); opacity: 0.6; transition: all 0.5s; -webkit-transition: all 0.5s; } .image_container:hover { background: rgba(0,0,0,0.0); opacity: 0.9; } .image_container img { width: 100%; height: 300px; } .image_container .img_text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-40%); transform: translate(-50%,-40%); z-index: 1; } .image_container h1 { font-size: 32px; line-height: 36px; font-weight: 700; color: #fff; margin-top: 10px; margin-bottom: 0px; text-align: center; text-shadow: 0px 2px 4px #333; } </style> </head> <body> <center><h2>Image Overlay With Text Hover Effect</h2></center> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="col-md-12 image_container"> <img src="img1.jpg" alt="" title="image1" /> <div class="img_text"><h1>Welcome to Everest</h1></div> </div> </div> <div class="col-md-6"> <div class="col-md-12 image_container"> <img src="img2.jpg" alt="" title="image1" /> <div class="img_text"><h1>Welcome to Annapurna</h1></div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
If you have any trouble feel free to comment or contact us via contact page.
Leave a Reply