CODEWITHSUNDEEP
jquerycss
Meek
Meek

Reputation: 3348

Add opaque overlay to element

I have been asked to display some numbers in a certain way - see image:

enter image description here

As you can see in the image, I need some sort of grey overlay on the upper half of each number to make part of the font a little darker. (At least, adding a semi transparent overlay is how I imagine this could be solved.)

I get these numbers in from one single xml node, and split the numbers with this piece of script:

var text = $("div.balance_number span");
var characters = $("div.balance_number").text().split("");
$("div.balance_number").empty();
$.each(characters, function (i, el) {
    $("div.balance_number").append("<span>" + el + "</span")
});
$("div.balance_number span").each(function (index) {
    var pt = $(this).text();
    if (pt == ",") {
        $(this).addClass("empty")
    }
});

The result is shown in the fiddle below. How do I solve the task of adding a overlay to the numbers? Or could it be solved in another way?

I have created a fiddle here.

Upvotes: 1

Views: 542

Answers (2)

user1211577
user1211577

Reputation:

Assuming this is the live code you'll be working with, you could try something like this?

HTML

<div class="balance">
  <div class="balance_number">
    <div class="left">
        <div class="dark-left"></div>  
        <span>9</span>
        <span>5</span>
    </div>
    <span class="empty">,</span>
    <div class="right">
        <div class="dark-right"></div>
        <span>3</span>
        <span>5</span>
    </div>
  </div>
</div>

CSS

.left, .right {
    position: relative;
    width: 62px;
    float: left;
}
.dark-left, .dark-right {
    width: 62px;
    height: 25px;
    position: absolute;
    background-color: rgba(0,0,0,0.3);
}

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

http://jsfiddle.net/tyuHb/5/

<div class="balance">
    <div class="balance_number">
        <span><span></span>9</span>
        <span><span></span>5</span>
        <span class="empty">,</span>
        <span><span></span>3</span>
        <span><span></span>5</span>
    </div>
</div>

CSS:

.balance_number > span {         /* note the ">" */
    position:relative;
    /* all other code ...*/

and:

.balance_number span > span {    /* note the ">" */
    position:absolute;
    left:0;
    height:24px;
    width:30px;
    background:rgba(0,0,0,0.4);
}

Upvotes: 4

Related Questions