I am using slick slider (http://kenwheeler.github.io/slick/) to display products for an e-commerce application:
This is what want to achieve:
This is what I am getting:
My Code:
<div>
<a href="#" >
<img src="img/offers/1.jpg" class="u-max-full-width" />
<div class="one">
<p>30%</p>
</div>
</a>
</div>
.one{
color:black;
background-color:red !important;
width:30%;
text-align:center;
border-radius:10%;
margin-top:-50px;
}
I went through this solution here (How to position text over an image in css) however, in my case I won't be able to use absolute position for the content. Edited Fiddle link from the above ans http://jsfiddle.net/utpalnu/EgLKV/5234/
My Fiddle link: http://jsfiddle.net/utpalnu/rdfg2fsk/