CODEWITHSUNDEEP
cssimagegeometry
Jhonatan Sandoval
Jhonatan Sandoval

Reputation: 1293

CSS - Create a circle on image start

I'm having some troubles making order numbers for images (dynamically).

I have this right now:

enter image description here

The images have width 120px, and the orange circles are placed with margins in a separate div.

<div>
   <img src="../IMG_PATH/{{$local[$i]['image']}}" 
        width="120" class="img_doctor">
</div>
<div class="order">
   {{ intval($i+1)  }}
</div>

This is my class order:

.order {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    line-height: 26px;
    text-align: center;
    background: #FF8242;
    color: white;
    position: absolute;
    margin: -159px 8px;
    font-size: 12px;
    font-weight: bold;
    font-family: Roboto-Regular;
}

So, I just need to make the circle before the image and placed on the corner, something like this:

enter image description here

Upvotes: 0

Views: 144

Answers (2)

Downgoat
Downgoat

Reputation: 14371

Make the image a <div> and put the number as a child:

document.getElementById("changeheight").onkeyup = function(e) {
  document.getElementsByClassName('image')[0].style.height = this.value + 'px';
}

document.getElementById("changewidth").onkeyup = function(e) {
  document.getElementsByClassName('image')[0].style.width = this.value + 'px';
}
.image {
  background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
  width: 100px;
  height: 40px;
  border-radius: 5px;
}
.image > span {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: orange;
  color: white;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
<div class="image">
  <span>1</span>
</div>

<span>Set height to: </span>
<input id="changeheight"><br/>

<span>Set width to: </span>
<input id="changewidth">

ignore the JavaScript and the setheight/setwidth stuff. I'm guessing you will populate this by yourself, so this is just the css.

Upvotes: 1

Shimakuro
Shimakuro

Reputation: 314

Try this:

<html>
<head>

  <style type="text/css">
  .order-wrapper {
    position: relative;
  }
    .order {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        line-height: 26px;
        text-align: center;
        background: #FF8242;
        color: #fff;
        top: 10px;
        left: 10px;
        position: absolute;
        font-size: 12px;
        font-weight: bold;
        font-family: Roboto-Regular;
    }
  </style>

</head>

<body>


<div class="order-wrapper">
  <div class="order">
     {{ intval($i+1)  }}
  </div>
  <img src="../IMG_PATH/{{$local[$i]['image']}}" width="120" class="img_doctor">
</div>

</body>
</html>

Upvotes: 0

Related Questions