CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Shrey Gupta
Shrey Gupta

Reputation: 5617

How to change where a CSS transition starts from?

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. Description of Problem: I would like my <code><div></code> to expand from the top right to the bottom left, as shown below, rather than from the top left to the bottom right.

Here's another image: enter image description here

Upvotes: 12

Views: 12303

Answers (5)

ScottS
ScottS

Reputation: 72261

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).

Upvotes: 10

Huzair Bahadur
Huzair Bahadur

Reputation: 1

Try this:

.right{
width:100px; 
height:100px; 
float:right;
background-color:#000000;
}

.right:hover{
margin-left:-300px;
width:300px;
transition:0.3s
}

Upvotes: 0

Benjamin
Benjamin

Reputation: 1070

This is incomplete, but perhaps if you wrap them in another fixed div. Again, this is sort of ugly, but maybe it's in the right direction. (Borrowing ScottS's fiddle).

div.one,.two,.three {
  display: inline-block;
  float: left;
  width:100px; 
  height:100px; 
  margin:3px;
  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;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}

div.one:hover,div.two:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
  float:right;
}

div.three:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
}

div.fixed {
  width: 330px;
  height: 220px;
  background: whitesmoke;
}

I've also split up the divs, because it seems like you can only corral two of them in a given direction...

http://jsfiddle.net/YAGmC/1/

Upvotes: 0

antejan
antejan

Reputation: 2624

Waiting for more details requested in comments under question.

For now I understand task like this http://jsfiddle.net/7ZUeu/34/

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.wrapper {
  float:left;
}

.box {
  width:100px; 
  height:100px; 
  float:right;
  background:url(http://placekitten.com/200/200/) no-repeat 100% 0;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
}
.box:hover {
  width:200px;
  height:200px;
}

Upvotes: 1

thomaskessel
thomaskessel

Reputation: 447

You can change your div:hover margins to something like margin:10px 10px 0px -100px; and get the desired effect. However, you will need to adjust your margins on both the div and the hover (if you can't use float:right). http://jsfiddle.net/7ZUeu/14/

Upvotes: 2

Related Questions