Overlapping an image via CSS just by using a class?

Question

Please, take a look on this:

<div class="box photo col2 normaloffer">

Where the css (simplified) is like:

.box {
  margin: 5px;
  padding: 5px;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  border:1px solid #DFDFDF;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.normaloffer {
    background: #D8D5D2;
}

.col2 { width: 180px; }

That renders:

enter image description here

Well, I need to overlap an image at the top center of each image, I know that making some divs and arranging them I can do that, but I was wondering, can I make this using a class? because I want to overlap the image sometimes and sometimes not. Something like:

<div class="box photo col2 normaloffer OVERLAP">
.OVERLAP { // no idea what to put in here, is possible? }

EDIT Result: enter image description here

Can you show (in an image) what you want to happen? (Just a clear visualisation would help.) — David Thomas, Nov 02 '12 at 22:02

amosrivera · Accepted Answer · 2012-11-02T22:10:41.893

4

You could use the :after pseudo class to create an element after inside the div and place it with absolute positioning.

.overlap {
    position:relative;
}

.overlap:after {
    content:' ';
    position:absolute;
    top:0;
    left:60px;
    width:60px;
    height:60px;
    background:url("http://placekitten.com/60/60") no-repeat center center red;
}

enter image description here

See working example: http://jsfiddle.net/WpBKr/

edited Nov 02 '12 at 22:10

answered Nov 02 '12 at 22:04

amosrivera

26,114
9
67
76

1

If you want to support IE7 or less, check out [this answer](http://stackoverflow.com/a/4181897/612266) about :after and :before pseudo elements. – Jeff Gortmaker Nov 02 '12 at 22:12
is there any way to handle images with transparency? – DomingoSL Nov 02 '12 at 22:27
I'm not sure what you mean but you can either set the opacity with css or use a PNG image. – amosrivera Nov 02 '12 at 22:44
im using a png image, but the area that should be transparent is red for some reason – DomingoSL Nov 03 '12 at 10:44
Oh right! that i sin the css. Take out the "red" in the bacckground property. – amosrivera Nov 03 '12 at 13:37

Overlapping an image via CSS just by using a class?

1 Answers1