user1795832 user1795832 - 1 month ago 6
CSS Question

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;
}

Answer

Try the following:

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