CODEWITHSUNDEEP
htmlcss
PIDZB
PIDZB

Reputation: 913

Place icon container over image - top left and top right

I am trying to create an element for a site-builder where I can place an icon on top of an image:

top-left:

-------
|*    |
|     |
-------

top-right:

-------
|    *|
|     |
-------

I have the following html:

<article class="col-md-4 project selected-column" contenteditable="true">
  <figure class="member square">
    <div>
      <aside>
        <i class="sub_icon fa fa-asterisk circle" style=" font-size:18px; line-height:21px;"></i>
      </aside>
      <div class="image-container square-container">
        </div>
          <img class="img-responsive" style="margin:auto;" src="http://placehold.it/250x250&amp;text=Afbeelding">  
        </div>
      <figcaption>
        <h4 style="text-align:center;" contenteditable="true">Voer hier uw naam in</h4>
        <p style="text-align:center; font-style:italic;;" contenteditable="true">Voer hier uw subtitel in</p>
        <p style="text-align:center;" contenteditable="true">Voer hier uw titel in</p>
      </figcaption>
  </figure>
</article>

The CSS that I have atm:

figure>div{
  display:table;
  margin:0 auto;
}

aside {
  position:absolute;
  width:40px;
  height:40px;
  background-color:#fff;
  text-align:center;
}

i {
  position:relative;
  top: calc(50% - 10px)
}

The code above places the icon container top left inside the image, which seemed like half of the work. But with this CSS and HTML I cannot place the icon container top right.

How to style this HTML so that I can place the icon top left AND top right?

I have a JSfiddle here

Upvotes: 1

Views: 1578

Answers (1)

Razvan B.
Razvan B.

Reputation: 6771

figure>div{
  display:table;
  position:relative;           /* new */
  margin:0 auto;
}

aside {
  position:absolute;
  width:40px;
  height:40px;
  right:0;                     /* new */
  background-color:#fff;
  text-align:center;
}

Here is your updated fiddle

Upvotes: 2

Related Questions