Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67411

div on an image at the bottom right corner

$
0
0

I'm trying to make a div on the bottom right corner of an image like the one which YouTube has.

see this

what I have is this

what I have

I tried but what I was getting is empty div inside the thumbnail div my code (without my attempts):

.card {
  width: 100%;
  text-decoration: none;
  overflow: hidden;
}

.card a {
  color: black;
  text-decoration: none;
  display: block;
}

.info {
  display: block;
  overflow: hidden;
  height: 50px;
}

.description {
  display: block;
  color: #555;
  font-size: 12px;
}

.thumbnail {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #222;
}

.thumbnail img {
  width: 100%;
}


/**************DON'T EDIT HERE IT'S NOT NECESSARY*************/


/******GRID******/

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  /*gap*/
}


/* For mobile phones and Extra small screens: */

.col-sm-1 {
  width: 8.33%;
}

.col-sm-2 {
  width: 16.66%;
}

.col-sm-3 {
  width: 25%;
}

.col-sm-4 {
  width: 33.33%;
}

.col-sm-5 {
  width: 41.66%;
}

.col-sm-6 {
  width: 50%;
}

.col-sm-7 {
  width: 58.33%;
}

.col-sm-8 {
  width: 66.66%;
}

.col-sm-9 {
  width: 75%;
}

.col-sm-10 {
  width: 83.33%;
}

.col-sm-11 {
  width: 91.66%;
}

.col-sm-12 {
  width: 100%;
}

.col-sm-hidden {
  display: none;
}

.col-sm-visible {
  display: block;
}

@media only screen and (min-width: 650px) {
  /* Medium devices (landscape tablets, 768px and up) */
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-hidden {
    display: none;
  }
  .col-md-visible {
    display: block;
  }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-hidden {
    display: none;
  }
  .col-lg-visible {
    display: block;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .col-xlg-1 {
    width: 8.33%;
  }
  .col-xlg-2 {
    width: 16.66%;
  }
  .col-xlg-3 {
    width: 25%;
  }
  .col-xlg-4 {
    width: 33.33%;
  }
  .col-xlg-5 {
    width: 41.66%;
  }
  .col-xlg-6 {
    width: 50%;
  }
  .col-xlg-7 {
    width: 58.33%;
  }
  .col-xlg-8 {
    width: 66.66%;
  }
  .col-xlg-9 {
    width: 75%;
  }
  .col-xlg-10 {
    width: 83.33%;
  }
  .col-xlg-11 {
    width: 91.66%;
  }
  .col-xlg-12 {
    width: 100%;
  }
  .col-xl-hidden {
    display: none;
  }
  .col-xl-visible {
    display: block;
  }
}

.icon {
  width: 18px;
  vertical-align: bottom;
  margin: 2px;
  opacity: 90%;
}

.margin-0 {
  margin: 0 !important;
}

.padding-0 {
  padding: 0 !important;
}

.right {
  float: right;
  clear: both;
}

.left {
  float: left;
  clear: both;
}
<div class="col-sm-6 col-md-4"><div class="card"><a class="" href=""><div class="model"><div class="thumbnail"><div></div><img src="https://picsum.photos/800/900" alt="thumbnail"><div><p>143 pics</p></div></div><div class="info"><span class="title">The model name </span><div class="description"><span class="country">Country </span> |<span class="date">3 days</span></div></div></div></a></div></div>

How can I make the <div><p>143 pics</p></div> goes into the bottom corner of the picture the same that youtube has?


Viewing all articles
Browse latest Browse all 67411

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>