Advance HTML/CSS block with 3 layers

Question

I trying to build block like on image is. There is one strip with 3 or more blocks. Under every block placed the number(content: counters ?). Every block may have own background, but i still want to see the number. Any ideas how to preform thinks like that? I tried to use z-index, but no luck.

link on fiddle

  .element:before{
    content: counters(el-list, "") ". ";
    font-size: 40px;
    z-index:2;
    color:#fff;
    position:absolute;
    margin-left:-10px;
  }

.element{
    height:50px;
    background:#333;
    margin:10px;
    width:50px;
    float:left; 
    counter-increment: el-list;
     z-index:3;
}

@user2692579 add this css class from your fiddle to your question: .element — Itay, Aug 17 '13 at 18:33
I would suggest that you can't do this with just `:after` or `:before` without changing the HTML. http://stackoverflow.com/questions/7822078/z-index-with-before-pseudo-element — Smuuf, Aug 17 '13 at 18:37
@Smuuf, then i need to crate some additional block and fill it whits numbers using js? content will not work with usual elements? — maxvektor, Aug 17 '13 at 18:52

score 2 · Accepted Answer · answered Aug 17 '13 at 19:39

I used three layers. One main container, wrappers and inner content divs. The counter is tied to wrappers as their :before element.

jsFiddle is here: jsShizzle

HTML.

<div class="main">
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <img src="http://lorempixel.com/160/60">
        </div>
    </div>
</div>

and CSS.

..with which you may want to fiddle a bit more is here. It's right off the top of my head and there may be some unnecessary rules.

.main {
    overflow: visible;
    background: rgba(0, 0, 0, 0.2);
    counter-reset:el-list;
    overflow:hidden;
    height: 80px;
}
.wrapper {
    counter-increment: el-list;
    float:left;
    position: relative;
    margin: 10px;
}
.wrapper:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 50px;
    padding-left: 10px;
    font-size: 82px;
    color: #fff;
    content: counters(el-list, "")". ";
}
.wrapper:hover:before {
    color: #000;
}
.content {
    display: inline-block;
    opacity: 0.8;
    height: 60px;
    background:#333;
    margin-left: 30px;
}
.content:hover {
    opacity: 0.4;
}

Advance HTML/CSS block with 3 layers

1 Answers1