how to make target link work giving different css properities


Tags: css,css3

Problem :

how to make the folowing change to be a scale transition ? once clicked on the link the expand to happen with scalling effect ?

http://jsfiddle.net/vladicorp/C63nn/5/

HTML CODE:

<a href="#click">One</a>

<div id="click">
<div id="one">Number One</div>  
<div id="two">Number Two</div>  
</div>

CSS CODE:

     #click {
    transition:all 1s ease;
}

#one {
color:yellow;    

}
#two {
color:yellow;    

}

#click:target #one {
    color:red;
    font-size:90px
}

#click:target #two {
    color:blue;
    font-size:420px
}


Solution :

Add transition in following css segment

#click:target #one {
    color:red;
    font-size:90px;
    transition:all 1s ease;
}

#click:target #two {
    color:blue;
    font-size:420px;
    transition:all 1s ease;
}

JS Fiddle Demo


    CSS Howto..

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How do align images vertically centers with CSS and HTML?

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to select nested UL element without class in JavaScript

    How to specify discrete mapper style in cytoscapejs?

    How to align content of a div to the bottom?

    css: How to add blank space under a sprint element

    How to add padding to a ul/li menu with a background image?

    How to use one popup box to display arbitrary number of information respectively?

    How to loop animated text banners using css keyframes

    How to set a css class to an array of tags on mouse hover in Javascript?

    How to wrap text in a element in IE

    How can I use JQuery to replace CSS background image and maintain gradient?

    How to calculate padding-top in % of the given div relative to its parent div

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to pass JavaFX variable into CSS style?

    How to get similar effect on menu

    How to hardware accelerate a box-shadow animation in CSS?

    How can I hide text in this jquery slider?

    Can't figure out how to code my css

    How to Add sub menu to dropdown menu in Blogger

    How to center div the whole screen page using css

    How to make list inside div expand after content in list

    How do you hide and show a background image using a carousel?

    How to get the position of element transformed with css rotate

    How to prevent an absolutely positioned element to affect the scrollbar?

    How can I make a color background that expands out of the 960 grid system?

    How to prevent css auto hyphenation for email addresses

    How to make input and select to be same width in css

    How can I put my div “downloads” always 70px below my image