Question

Suppose I have a <div> which I would like to expand from a small size to a bigger size (See this).

By default, a width and height CSS3 transition on a <div> will start from the top left and progress to the bottom right. However, I want the <div> to expand from the top right corner to the bottom left.

Here is my question: Is there any way I could make the <div> undergo a width and height transition from the top right corner to the bottom left?

Here’s an image to clarify my question. Basically, I would like my <div> to expand like the box on the right, not like the default way, shown by the box on the left.

Here’s another image:

Answer 1

Because you want to have things "shift", then you don’t really see the fact that it is growing from the right to the left, but I think this achieves what you are desiring (it tweaks some other margins, and adds a relative shift):

div {
    width:100px; 
    height:100px; 
    float:left;
    margin:5px;
    position: relative;
    right: 0;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    background-color:rgba(25,25,25,0.7);
    transition: all 0.5s ease;
}
div:hover {
    width:200px;
    height:200px;
    margin:10px 115px 0px -105px;
    right: -110px;
}

<div></div>

Note, simply because of the nature of floats and having the items shift, you will get some bizarre behavior with many elements. Play around with this fiddle when it is downsized so there are at least two rows of divs.

Explanation of Margins

The 115px right margin pushes the following element over (the "shift" you wanted) making space for the element to expand. It is the width of the element, plus the 5px margins on the elements, plus the fact that the larger size element is increasing its margin to 10px. It is into this space that the right shift occurs. The direction of the expansion itself happens through the -105px, which is what causes the element to expand left (as you originally wanted).

UPDATE to your newer pictures: Take a look at this fiddle. There are still some small bugs, but functions nicely based on a set of three div’s (there is an extra non-semantic span to make my functionality work).