These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:20 pm Advanced search

HTML5 and CSS3 doubt.

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

HTML5 and CSS3 doubt.

Postby Long_username_bad_display » Thu Feb 10, 2011 12:55 am

Hi, I'm new here...

I am creating my first website that will use almost all the HTML5 and CSS3 features, for fun and to get accustomed to them, but this came along...

I created an element that gets resized on mouse hover with CSS3, and I want the text to only be visible when the element is behind it, I will eventually use an image if I can't get this to work, code is here(JSfiddle).

thanks a million.

PS: the z-index isn't doing anything.

I'm using google chrome.
Long_username_bad_display
<h6>
 
Posts: 1
Joined: Thu Feb 10, 2011 12:48 am
Location: Portugal

Re: HTML5 and CSS3 doubt.

Postby Xdega » Thu Mar 03, 2011 1:41 pm

Couldn't you simply use a mouseover for the text in the same way you are using mouseover for the background element?
It appears the background element will only show on mouseover anyways.

Also one thing to note. The animation is only working on Chrome, and the rounded borders are only working on Chrome and IE9.
Xdega
<h2>
 
Posts: 124
Joined: Tue Mar 01, 2011 6:30 pm
Location: USA

Postby Xdega » Thu Mar 03, 2011 2:00 pm

here is the updated .css

Code: Select all
#Home
{
    display:block;
    position:relative;
    font-size:2em;
    width:25px;
    height:43px;
    background-image:url('http://www.martin.com/color/small/red305.1.gif');
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:0s;
    /*Safari and Chrome: */
    -webkit-transition-property:width;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /*Opera: */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
    border-radius:10px;
    z-index:2;
}

#Home:hover
{
    width:79px;
}

.menu-text
{
    display:block;
    position:relative;
    opacity: 0; /*Firefox and Opera */
    filter: alpha(opacity=0); /*IE*/
   
        transition-property:opacity;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:0s;
    /*Safari and Chrome: */
    -webkit-transition-property:opacity;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /*Opera: */
    -o-transition-property:opacity;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
   
}

.menu-text:hover
{
    display:block;
    position:relative;
    opacity: 100; /*Firefox and Opera */
    filter: alpha(opacity=100); /*IE*/
   
    transition-property:opacity;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:0s;
    /*Safari and Chrome: */
    -webkit-transition-property:opacity;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /*Opera: */
    -o-transition-property:opacity;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

    http://jsfiddle.net/8RySq/13/


I will say this. My first time playing around with some of that css stuff. Very interesting indeed. Obviously you are probably going to want to tweak your timing etc but yeh. Should work if the test was an image too. Screw the z axis idea though.
Xdega
<h2>
 
Posts: 124
Joined: Tue Mar 01, 2011 6:30 pm
Location: USA

Postby JAB Creations » Thu Mar 03, 2011 2:06 pm

The z-index property is for stacking, X / Y / Z axis. x is left/right, y is up/down and z is close/far.

So in example if you have two images or divisible elements that overlap each other by 50% setting the z-index to the left item to 0 and the right item to 1 will make the right item appear on top of the left item.

Keep in mind that z-index is a position related property and does not correlate with margins. You'll need to use position: absolute/relative; left/right: 50px; top/bottom: -100px; like syntax (slashes denote two different options for values, you can only use one value at a time though).
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests