CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
JAVA_RMI
JAVA_RMI

Reputation: 139

showing one div on image top

i want to display a div on image top with some background color and there will be some data in it circular things indicates category and below it shows name and it's date https://jsfiddle.net/shane07861234/88k78f7n/2/ here is my try but can't able to incline them properly.Date and name will be displayed below category.

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<!-- <div class="box-hover"></div> -->
    <div class="image-div-contents">
        <div class="top-div">
            <div class="box-text"><span>AG</span></div><br><br>
            <div class="doc-name"> LLL Bill</div><div class="doc-date">2/02/2017</div>
       </div>
       <a class="thumbnail" href="#">
          <div class="validitity"><span>Validitity: Forever</span></div>
          <img class="img-responsive" src="http://placehold.it/200x300" alt="">
          <!-- <div class="box-tresc"><div class="circle-category"><b>Category:<b></div></div> -->
      </a>                     
   </div>
</div>
<!-- </div> -->

https://i.sstatic.net/KM76h.png

Upvotes: 1

Views: 93

Answers (1)

amansoni211
amansoni211

Reputation: 929

This might help you. your code was so messed up could not help more.

fair suggestion: do not use position: absolute and float until things can not be done easier way.

.thumb {
  position: relative;
  margin-bottom: 30px;
  z-index: -1;
  border: 1px solid red;
}
.thumbnail .img {
  max-height: 100%;
  max-width: 100%;
  border: 0 none;
}
.thumbnail {
  border: 0 none;
  box-shadow: none;
}
.box-text {
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 20px;
  left: 60px;
  top: 20px;
  -moz-border-radius: 30px;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  background: #652c90;
  color: white;
  text-align: center;
}
.image-div-contents {
  display: inline-block;
  position: relative;
}
.box-text {
  z-index: 4;
  padding: 5px;
  text-align: center;
  background-color: #652c90;
}
.doc-name {
  white-space: nowrap;
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 15px;
  display: inline;
  left: 0px;
  text-align: right;
  width: 90px;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.doc-date {
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 15px;
  text-align: left;
  display: inline;
  padding: 0px 90px;
  overflow: hidden !important;
}
.validitity {
  opacity: 0.8;
  border-radius: 5px;
  font-family: 'Aller Regular';
  z-index: 100;
  color: white;
  font-size: 15px;
  background-color: #ee3f6a;
  padding-left: 35px;
  padding-right: 35px;
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
}
.top-div {
  z-index: 1;
  /* position:absolute;  */
  height: auto;
  width: 100%;
  background-color: #33FF99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <!-- <div class="box-hover"></div> -->
  <div class="image-div-contents">
    <div class="top-div">
      <div class="box-text"><span>AG</span>
      </div>
      <br>
      <br>
      <div class="doc-name">LLL Bill</div>
      <div class="doc-date">2/02/2017</div>
    </div>
    <a class="thumbnail" href="#">
      <div class="validitity"><span>Validitity: Forever</span>
      </div>
      <img class="img-responsive" src="http://placehold.it/400x300" alt="">
      <!-- <div class="box-tresc"><div class="circle-category"><b>Category:<b></div></div> -->
    </a>

  </div>
</div>
<!-- </div> -->

Upvotes: 1

Related Questions