Q: Color gradient not working I'm trying to get a color gradient working for a group of images on a site I'm building and I'm getting nothing. I think I'm using the right code but I don't think the rules I'm using are correct. 
This is what I have at the moment - 
styles.css
.img_holder:before {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

  opacity: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}


 .img_holder img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}



 .wrapper .img_holder .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
   opacity: 0;
  transition: .7s ease;
  background-color: rgba(0,0,0,0.7);
}


.img_holder:hover .details {
  opacity: 4;
}

index.html
     <div class="brick">
              <img src="2images/2advertising.jpg">
             <div class="details">
               <span id="title">Lorem Ipsum Dolor</span>
              <span id="info">Quisque vel felis lectus donec vitae dapibus magna</span>
                   </div>
          </div>

At the moment the images look like this - 

I want the background-color to fade out into the image rather than just stop at the top of the text. I've seen this on other examples but can't seem to replicate it. Any help appreciated

A: Apologies if i am not formatting correctly, first time answering. 
Here is what i think you were asking for. Just using some gradient and playing with opacity to fade the background to nothing. 
<div class="card">
    <img src="http://placekitten.com/250/350" alt="">
    <div class="card__caption">
        <span class="card__caption__title">Lorem Ipsum</span>
        <span class="card__caption__body">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</span>
    </div>
</div>

.card {
    position: relative;
    width: 250px;
}

.card__caption {
    position: absolute;
    bottom: 0;
    padding: 40px 20px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0));
 }

 .card__caption__title,
 .card__caption__body {
     display: block;
     color: white;
 }

 .card__caption__title {
     font-size: 1.4em;
 }

Here is a pen for an example: https://codepen.io/andrewchar/pen/MEXYza?editors=1100

A: Try placing the gradient on the image rather than the text container.
.darken {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(shoes.jpg);
}

see. https://css-tricks.com/design-considerations-text-images/

A: There are a lot of errors/flaws in your code: 
opacity: 0 makes that element completely transparent/invisible, regardless of its background settings
an opacity value of 4 doesn't exist
there is no element with an .img_holder class in your html code
there is no .wrapper class in your HTML code
if the last css rule is intended as a hover class for the next to last, it needs the same specifity: Delete the .wrapper class from the next to last rule.
a :before element needs more settings, often it relates to the main element by having position: absolute and appropriate position and size settings , and the main element needs  position: relative for the absolute positioning to work
hm.
I hope what I did in my snippet will help you to some extent. At least there's a gradient background and an element fading in on hover over the image...


.img_holder {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 1;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border: 1px solid red;
}

.img_holder img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.img_holder .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transition: .7s ease;
  background-color: rgba(0, 0, 0, 0.7);
}

.img_holder:hover .details {
  opacity: 1;
}
<div class="brick img_holder">
  <img src="2images/2advertising.jpg">
  <div class="details">
    <span id="title">Lorem Ipsum Dolor</span>
    <span id="info">Quisque vel felis lectus donec vitae dapibus magna</span>
  </div>
</div>


