How to create a transparent dark overlay above image with text?

Question

I want a to create a transparent dark image overlay above image with text. with a nice transition on hover.

 .study1 { background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); height: 300px; width: 400px; } .title { margin: 0 auto; width: 60%; display: block; font-size: 1.25em; color: #ccc; text-align: center; padding-top: 120px; } 

 <div class="study1"> <div class=""> <a class="title" href="#">View Case Study</a> </div> </div> 

the design I wanted is this:

Answer 1

 .study1 { background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); height: 300px; width: 400px; position:relative; z-index:1; } .study1:after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:-1; } .title { margin: 0 auto; width: 60%; display: block; font-size: 1.25em; color: #ccc; text-align: center; padding-top: 120px; } .transparent-dark { background: rgba(0, 0, 0, 0.5); height:100%; } 

 <div class="study1"> <div class="transparent-dark"> <a class="title" href="#">View Case Study</a> </div> </div> 

Answer 2

See below. Using the :after pseudo code the background is set with opacity 0. On hover, the opacity is changing to 0.3 with a duration of 1 second.

 .study1 { background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); height: 300px; width: 400px; position: relative; } .study1:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: background 1s ease; } .study1:hover:after { background: rgba(0, 0, 0, 0.3); } .title { margin: 0 auto; width: 60%; display: block; font-size: 1.25em; color: #ccc; text-align: center; padding-top: 120px; } 

 <div class="study1"> <div class=""> <a class="title" href="#">View Case Study</a> </div> </div> 

Answer 3

Use this code

 .study1 { background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); height: 300px; width: 400px; position:relative; z-index:1; } .study1:after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:-1; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:0.5s; transition:0.5s } .study1:hover:after{ -webkit-transform:scale(1); transform:scale(1); } .title { margin: 0 auto; width: 60%; display: block; font-size: 1.25em; color: #ccc; text-align: center; padding-top: 120px; } 

 <div class="study1"> <div class=""> <a class="title" href="#">View Case Study</a> </div> </div> 

Answer 4

Set the transparent dark image overlay using the class .wrapper mentioned in the js fiddle, set the position: relative to .study1 and position other elements accordingly.

Here is the js fiddle.

Answer 5

This may serve your purpose

 .image { position:relative; width:200px; height:200px; } .image img { width:100%; vertical-align:top; } .image:after { content: attr(data-content); color:#fff; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.6); opacity:0; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:hover:after { opacity:1; } 

 <div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image"> <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> </div> 

for more details please go here https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css

Answer 6

 .study1 { background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); height: 300px; width: 400px; position: relative; } .action { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.4); overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .study1:hover .action { height: 100%; } .title { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } 

 <div class="study1"> <div class="action"> <a class="title" href="#">View Case Study</a> </div> </div> 

I think it may suites your requirement. A neat transition.

Answer 7

 .container { display: flex; position: relative; border: 1px solid: #ddd; width: 300px; height: 300px; } .overlay { position: absolute; left: 0; padding: 20px; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(127, 127, 127, 0.6); transition: all 0.3s ease; } .content { width: 300px; height: 300px; background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; } .text { font-size: 25px; text-transform: uppercase; color: #fff; display: inline-flex; justify-content: center; text-align: center; transition: all 0.8s ease; } .overlay:hover .text { transform: scale(1.2, 1.2); } 

 <div class="container"> <div class="overlay"> <span class="text">The World's finest developers</span> </div> <div class="content"> </div> </div> 

Here is a snippet according to your requirement.