画像の上部に1つのdivを表示

Question

画像の上にdivを表示したい背景色があり、そこにいくつかのデータがあります。循環的なものがカテゴリを示し、その下に名前と日付が表示されますhttps://jsfiddle.net/shane07861234/88k78f7n/2/ここは私の試みですが、それらを適切に傾斜させることができます。日付と名前はカテゴリの下に表示されます。

<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.stack.imgur.com/KM76h.png

Answer 1

これはあなたを助けるかもしれません。あなたのコードはとてもうんざりしていました。

公正な提案：物事がより簡単に行えない限り、position: absoluteとfloatを使用しないでください。

.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> -->