CODEWITHSUNDEEP
htmlcsscss-transitions
user1795832
user1795832

Reputation: 2160

CSS transition width to the left

I'm trying to take a div that has a span that is always displayed, and a paragraph that is underneath it displayed when hovering over the div. What I have works, except I want some of those div's to transition the width so they transition down and then left. The default (and I'm guessing browser default) seems to always be down and then right.

Link to fiddle and code below. There are two red box div's with title text that when you hover over them, the width expands and the paragraph below it is displayed. What I'm looking to do is make the bottom right div (Title Here2 text) transition to the left. So the red background would not transition to the right at all.

NOTE: The position of the div's on the page cannot change.

http://jsfiddle.net/szfiddle/qP5fW/1/

HTML

<div class="hpBox">
    <span>Title Here</span>
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.</p>
</div>
<div class="hpBox hpBox2">
    <span>Title Here2</span>
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.</p>
</div>

CSS

.hpBox {
    display: inline-block;
    padding: 10px;
    background: red;
    -webkit-transition: 1s linear;
    transition: 1s linear;
    max-width:200px;
    max-height:22px;
    position:absolute;
}
.hpBox p {
    max-height: 0;
    max-width: 0;
    overflow: hidden;
    -webkit-transition: 2s linear;
    transition: 2s linear;
}
.hpBox:hover {
    max-width:400px;
    max-height:200px;
}
.hpBox:hover p {
    max-height: 200px;
    max-width: 400px;
}
.hpBox2 {
  left:60%;
  top:250px;
}

Upvotes: 1

Views: 13016

Answers (4)

demsley
demsley

Reputation: 327

I was struggling with this and, after a few searches found a solution on CodePen.

Here is the link: http://codepen.io/heisters/pen/gMgboJ

Worked for me.

HTML

<div>
  <h1>Normal</h1>
  <item>One</item>
  <item>Two</item>
  <item>Three</item>
  <item>Four</item>
</div>
<div class="grow-left">
  <h1>Grow Left</h1>
  <item>One</item>
  <item>Two</item>
  <item>Three</item>
  <item>Four</item>
</div>

CSS:

div {
  display: block;
  width: 200px;
  margin: auto;
  background-color: #EEE;
}
item {
  display: block;
  background-color: #FDD;
  transition: all, 0.5s;
  width: 200px;
}

item:hover {
  width: 400px;
}

.grow-left {
  direction: rtl;
}
.grow-left > * {
  direction: ltr;
}

HTH

Dave

Upvotes: 3

Barun
Barun

Reputation: 4431

One of the way to do this is to set right and bottom properties instead of top and left properties.

.hpBox2 {
  right: 35%;
  bottom: -121px;
}

Updated jsfiddle

Upvotes: 0

s0h3ck
s0h3ck

Reputation: 141

Try the following:

   .hpBox2 {
    top: 250px
    right: 40%;
    text-align: right;
  }

Add this property to have no text overflow when the mouse is no longer in hovering mode.

.hpBox {
    /* ... */
    overflow:hidden;
}

Upvotes: 0

Yan Sarazin
Yan Sarazin

Reputation: 258

Try the following:

 .hpBox2 {
   top:250px;
   right: 20%;
   text-align: right;
 }

Upvotes: 3

Related Questions