How To Make Transparent Image On Another Background Image In Css

In this tutorial we are going to brand a black overlay on background paradigm using CSS. We volition too put text at the centre of image to get in look beautiful with the text shadow.

If you want to check the demo click below.

Demo

Lets get started

What are we going to practice ?

Prepare a layout with <div> and class name.
Add some CSS code to achieve our result.

For the bulk of this tutorial nosotros are going to use some images and play with the CSS code to achieve the desired result step by step.

Nosotros are going to utilize bootstrap to do the things bit apace. So, i would suggest you to do the same. Yous can download bootstrap from here or use the CDN links.

Stride one : Set up a layout with <div> and form name

We are going to create a <div> with a class named image_container and add an image with an <img> aspect

As well another <div> is added equally a caption text that is used to align it at the heart by using the CSS. Take a look at the code below.

iii

ten

thirteen

xiv

fifteen

< div class="container" >

< div form="row" >

< div class="col-doc-half dozen" >

< div course="col-md-12 image_container" >

< img src="img1.jpg" alt="" title="image1" />

< div class="img_text" > < h1 > Welcome to Everest </h1 > </div >

</div >

< div class="col-md-half-dozen" >

< div grade="col-md-12 image_container" >

< img src="img2.jpg" alt="" title="image1" />

< div class="img_text" > < h1 > Welcome to Annapurna </h1 > </div >

</div >

Step 2 : Add together some CSS code to Achieve the Result.

Later adding paradigm and another <div> for the display text inside the center of the epitome. We are going to put and overlay in the <div> outside the image and alter its beliefs on hover. Copy and paste the CSS code beneath.

two

ten

xiii

xviii

twenty

.image_container {

padding : 0 ;

}

.image_container:after {

content : '\A' ;

position : absolute ;

width : 100% ;

elevation : 100% ;

top : 0 ;

left : 0 ;

background : rgba ( 0,0,0,0.six ) ;

opacity : 0.half-dozen ;

transition : all 0.5s ;

-webkit-transition : all 0.5s ;

}

.image_container:hover {

groundwork : rgba ( 0,0,0,0.0 ) ;

opacity : 0.9 ;

}

.image_container img {

width : 100% ;

height : 300px ;

}

.image_container .img_text {

position : absolute ;

pinnacle : 50% ;

left : 50% ;

-webkit-transform : interpret ( -50%,-40% ) ;

transform : interpret ( -fifty%,-40% ) ;

z-index : 1 ;

}

.image_container h1 {

font-size : 32px ;

line-meridian : 36px ;

font-weight : 700 ;

colour : #fff ;

margin-summit : 10px ;

margin-bottom : 0px ;

text-align : center ;

text-shadow : 0px 2px 4px #333 ;

}

Finally the Full Lawmaking

If yous have whatsoever problem using it simply copy the full code below in order to achieve the consequence.

three

four

eight

xix

twenty

thirty

< ! 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" >

.container {

margin-meridian : 30px ;

}

.image_container {

padding : 0 ;

}

.image_container:subsequently {

content : '\A' ;

position : absolute ;

width : 100% ;

height : 100% ;

pinnacle : 0 ;

left : 0 ;

background : rgba ( 0,0,0,0.vi ) ;

opacity : 0.half dozen ;

transition : all 0.5s ;

-webkit-transition : all 0.5s ;

}

.image_container:hover {

groundwork : rgba ( 0,0,0,0.0 ) ;

opacity : 0.ix ;

}

.image_container img {

width : 100% ;

height : 300px ;

}

.image_container .img_text {

position : accented ;

pinnacle : 50% ;

left : fifty% ;

-webkit-transform : translate ( -fifty%,-40% ) ;

transform : translate ( -50%,-40% ) ;

z-alphabetize : 1 ;

}

.image_container h1 {

font-size : 32px ;

line-summit : 36px ;

font-weight : 700 ;

colour : #fff ;

margin-top : 10px ;

margin-lesser : 0px ;

text-marshal : center ;

text-shadow : 0px 2px 4px #333 ;

}

</way>

</head >

< torso >

< center > < h2 > Image Overlay With Text Hover Effect </h2 > </center >

< div course="container" >

< div class="row" >

< div class="col-md-half dozen" >

< div class="col-md-12 image_container" >

< img src="img1.jpg" alt="" title="image1" />

< div grade="img_text" > < h1 > Welcome to Everest </h1 > </div >

</div >

< div class="col-doc-half-dozen" >

< div class="col-dr.-12 image_container" >

< img src="img2.jpg" alt="" championship="image1" />

< div grade="img_text" > < h1 > Welcome to Annapurna </h1 > </div >

</div >

</body >

</html >

If you lot have whatsoever trouble feel free to annotate or contact us via contact page.

Enjoyed this commodity?

Like the states on

Hello Welcome to my Blog. I develop Websites Using Laravel Framwork & WordPress. Get Latest updates on Facebook | Twitter