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 ?


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

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


     #click {
    transition:all 1s ease;

#one {

#two {


#click:target #one {

#click:target #two {

Solution :

Add transition in following css segment

#click:target #one {
    transition:all 1s ease;

#click:target #two {
    transition:all 1s ease;

JS Fiddle Demo

    CSS Howto..

    How to add css files to a custom module in Odoo 8?

    How to remove the input field around an image button?

    How to give border a single border for two adjacent cells in css

    How to embedded all resources(css,js,images) into one single html file?

    How to make table have same width as container?

    How to reference css and script files into a node.js app?

    How use a -ms-expand in GWT (Google Web Tolkit)

    How can change the style of
      tag in CSS

    How to make one css input type be displayed the same as another input type

    How to implement a drag and swap effect in CSS and JS [closed]

    How to make like this gradient sun effect using CSS?

    How to load a dynamic view css file using requireJs & Backbone

    How to style multiple instances differently of the same jquery control?

    How to fade-in and fade-out background-image with CSS transition?

    How to access to a CSS file in HTML?

    How to underline button text (using CSS) when mouse pointer is over the button?

    CSS Matrix - how to achieve percentage translation

    How to show html template using inline styles only?

    Using CSS how to change only the 2nd column of a table

    how to animate “simple jquery filtering” by using css only

    How to overlay two fonts with css

    How to echo individual css classes for li's?

    How to create e-commerce website [closed]

    Rails: how to style submit tag with custom css

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to select lowest level ul in nested ul in Javascript/ css

    How can I add pictures to my web via CSS

    how to fix the difference in line thickness for a collapsable element

    Are where any examples available on how to use postcss-modules instead of css-modules?

    How to stack multiple divs on top of each other and each have a height of 100%