CODEWITHSUNDEEP
cssbackgroundstylesgradientopacity
Ketan
Ketan

Reputation: 619

How to apply background Gradient style css

I want to apply nackground gradient style like this -> http://nimb.ws/Xq79Uw

Following is HTML code:

<div class="featured-title zl-artful-featured-title">
   <aside class="post-meta cf">
      <a aria-label="Artful Interiors" class="cat-artful-interiors" href="http://localhost/magnifissance/?cat=86">Artful Interiors</a>                                          
   </aside>
   <div class="row">
      <div class="columns medium-10">
         <div class="post-title zl-artful-interi-title">
            <a href="http://localhost/magnifissance/?p=12466">Enrico Fratesi Shares His Vision of Form, Tradition and Renewal</a>
         </div>
      </div>
      <div class="columns medium-2">
         <figure class="post-gallery "></figure>
      </div>
   </div>
</div>

Any one have a idea for this type style then please update me.

Thanks.

Upvotes: 0

Views: 366

Answers (2)

Xhynk
Xhynk

Reputation: 13840

It looks like the gradient is on top of the image in your example. This code using pseudo elements will do that for you, vs putting the gradient code on the div itself.

#artful_interiors .post > a {
    position: relative;
}

#artful_interiors .post > a:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(0,0,0,0) 50%, #000 95% );
}

Upvotes: 1

Noriel
Noriel

Reputation: 218

#zl-artful-featured-title{
   background: linear-gradient(
    to top,
    #63B4C9  35%,
    #FFFFFF 70%
  );
  background-repeat: no-repeat;
  height:260px;
  width:100%;
}
<div id="zl-artful-featured-title">
    <p>Content</p>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvbOaFeLuR9IUkcut98bJs4r7-Qm8AGcEEYiiKxiAZEiljvUS_"/>
</div>

Try this

#zl-artful-featured-title{
  background-image: -webkit-linear-gradient(90deg, #63B4C9 35%, #FFFFFF 40%);

}

If not working try this

 #zl-artful-featured-title{
  background: linear-gradient(
    to bottom,
    #63B4C9  35%,
    #FFFFFF 70%
  );
}

Make sure you've change the # to . if your using class. I hope it helps

Upvotes: 0

Related Questions