CODEWITHSUNDEEP
htmlcss
Nordine
Nordine

Reputation: 866

Place an image in the left corner of border

My problem is very simple, I want to place a small image in the corner left of my border as shown in the example below.

enter image description here

My code

.description{
  border: 1px dotted black;
  position: relative;
}

.img-description{
  position: absolute;
  top: 0;
  left: 0;
}

p{
  padding: 20px;
}
<div class="col-md-4 description">
  <img src="http://i.imgur.com/m8s1L6J.png" class="img-description"/>
  <p>Some text...</p>
</div>

Do you know how I could achieve this?

Thanks for your help.

Upvotes: 0

Views: 77

Answers (5)

Liam
Liam

Reputation: 1920

You just need to use negative values for your top and left rules.

Like this fiddle.

Upvotes: 1

Staveven
Staveven

Reputation: 120

Simply just change your Top and Left values to negative.

 .img-description{
  position: absolute;
  top: -5px;
  left: -5px;
  }

Here it is with the new CSS code: https://jsfiddle.net/939q3rco/

Upvotes: 1

Armin
Armin

Reputation: 1178

If you already have this code

.img-description{
  position: absolute;
  top: 0;
  left: 0;
}

You can update your top and left values to fit your idea. For example:

.img-description{
  position: absolute;
  top: -10px;
  left: -10px;
}

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can add some negative transform: translate() for x and y.

.description {
  border: 1px dotted black;
  position: relative;
  margin: 20px;
}
.img-description {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
}
p {
  padding: 20px;
}
<div class="col-md-4 description">
  <img src="http://i.imgur.com/m8s1L6J.png" class="img-description" />
  <p>Some text...</p>
</div>

Upvotes: 0

Krystian Borysewicz
Krystian Borysewicz

Reputation: 779

img {
  margin-left: -5px;
  margin-top: -5px;
}

Upvotes: 2

Related Questions