3

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:

the design I wanted is this

curious
  • 1,504
  • 5
  • 18
  • 32
Belgin Varghese
  • 39
  • 1
  • 5

7 Answers7

2

.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>
Kenneth
  • 2,813
  • 3
  • 22
  • 46
  • You should be more descriptive. Which HTML Element should get the `.transparent-dark` class? Does he need to add new markup? Can you give us a working example, since the author of the question even provides a StackSnippet for you? – Matthias Seifert Aug 22 '17 at 05:37
1

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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
1

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>
ankita patel
  • 4,201
  • 1
  • 13
  • 28
1

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.

kmg
  • 499
  • 3
  • 16
1

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="https://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

Sifat Haque
  • 5,357
  • 1
  • 16
  • 23
1

.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.

Rajez
  • 3,717
  • 1
  • 14
  • 21
0

.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.

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41