CODEWITHSUNDEEP
jquerycss
Alex Morris
Alex Morris

Reputation: 65

Making a piece of text sit right on top

The idea for the piece of css/jQuery I'm playing about with is that basically, one div of colour sits on top of another, then fades out with a link on the top so that the colour behind the main div shows through on mouseover and returns back to the main colour after you leave the div.

My issue is that basically I can't fit the text into a division and have it constantly on top because if it's placed in the fading div then the text obviously fades out, likewise it won't always show up when it's on the bottom div. So far I have this:

css:

    .logo{
        width: 200px;
        height: 100px;
        background-color: #519CC4;
        float: left;
        text-align: center;
    }

    .barofcolour{
        width: 200px;
        height: 100px;
        background-color: #51B9C4;
        float: left;
        position: absolute;
    }

body:

<div class="logo">
      <!--put text here-->
</div>
<div class="barofcolour">
      <!--or here-->
</div>

jQuery:

    $(document).ready(function(){
        $(".barofcolour").hover(function(){
            $(".barofcolour").fadeTo("1000", 0);
            },function(){
            $(".barofcolour").fadeTo("1000", 1);
        });
    });

So if anybody could give any insight as to how I could make some text sit ALWAYS on top of both the fading colour bar and the static bar of colour. That'd be nice.

Upvotes: 2

Views: 142

Answers (3)

Zhihao
Zhihao

Reputation: 14747

If you always want the same text but just have the background color change, you could use CSS transitions instead of fading an overlapping div:

HTML

<div class="logo">
      Text 
</div>​

CSS

.logo{
    width: 200px;
    height: 100px;
    background-color: #519CC4;
    float: left;
    text-align: center;

    transition: background-color 1s;
    -moz-transition: background-color 1s; /* Firefox */
    -webkit-transition: background-color 1s; /* Safari and Chrome */
    -o-transition: background-color 1s; /* Opera */
}
.logo:hover { background-color: #51B9C4; }

​Demo

Edit: If you want to use a jQuery solution, you could also do something like this:

$(document).ready(function(){
    $(".logo").hover(function(){
        $(this).animate({ backgroundColor: '#51B9C4'}, 1000);
        },function(){
        $(this).animate({ backgroundColor: '#519CC4'}, 1000);
    });
});​

Note that you would need either jQuery UI or some other color animation plugin (or write one yourself).

Demo

Upvotes: 2

nixblu
nixblu

Reputation: 26

This may be a little cack handed but I confused myself on the way. here ya go: HTML

<div class="wrapper">

<div class="logo">
      <!--put text here--> </div> <div class="barofcolour">
       <!--or here--> </div>

 <div class="textboox"> TEXT</div> </div>

CSS

.logo{
        width: 200px;
        height: 100px;
        background-color: #519CC4;
        float: left;
        text-align: center;
                z-index: 11;
    position: relative;

    }

    .barofcolour{
        width: 200px;
        height: 100px;
        background-color: #51B9C4;
        float: left;
        z-index: 12;
            position: relative;
            margin-top: -100px;

    }

    .wrapper {
    width: 200px;
        height: 100px;
    position: relative;
    float: left;
    z-index: 50;}

    .textboox {
    float: left;
    position: relative;
    margin-top: -20px;
    z-index: 60;
    }

Upvotes: 0

neu-rah
neu-rah

Reputation: 1693

to have opaque text on a transparent background (css3) use

background-color: rgba(...);

where you can specify alpha channel for background transparency without affecting the text. If you want to animate the rgba background i recommend jquery color at https://github.com/jquery/jquery-color/

Upvotes: 0

Related Questions