1

I am using slick slider (http://kenwheeler.github.io/slick/) to display products for an e-commerce application:

This is what want to achieve:

enter image description here

This is what I am getting:

enter image description here

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/

Community
  • 1
  • 1
Utpal - Ur Best Pal
  • 4,472
  • 3
  • 17
  • 28

2 Answers2

2

I believe you just need to add this to your CSS.

position:relative

http://jsfiddle.net/vkyuyvo7/

Delto
  • 321
  • 2
  • 14
0

You have to add position:relative to wrapping element and then you can use position:absolute to the red label.

.wrapper { //add this class to <a> tag
 position:relative;
}
.one {
    color:black; 
    background-color: red;
    width:30%;
    text-align:center; 
    border-radius:10%;
    position:absolute; // now it will work.
    top: -30px; //changed from margin to "top" style, but margin will also work.
    left: 10px; // I've also added "left" for nice look :)

}

http://jsfiddle.net/rdfg2fsk/3/

Jakub Matczak
  • 15,341
  • 5
  • 46
  • 64