CODEWITHSUNDEEP
htmlcss
Asteria
Asteria

Reputation: 330

HTML reverse transition direction

Much like this question here (How would I reverse a css transition property width?) I want to reverse the way my transition goes.

Unfortunately it's not working for me! It might be that my code is a little more complex then that. Can anyone lend me a hand?

JSFiddle = http://jsfiddle.net/cPUuL/4/

CSS:

    .Imgpad
{
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
    position:absolute;
    z-index:1;
}

.hidetext {
float:right;
display:none;
margin:0;
padding:0;
color:#CC0000;
font-size:30px;
font-family:"Juice ITC";
}

.Rightbox
{
width:100px;
height:100px;
background:black;
transition: left 2s, width 2s;
position:absolute;
}

.Rightbox:hover{
width:250px;
}

.Rightbox:hover > .hidetext {
display:block;
}

HTML:

</div>
<div class="content-wrapper">
<div id="Divpos5">
<div class="Rightbox">
    <img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye">
    <p class="hidetext">Raven Faye<br><font color="#9900CC"></font>~The Sorceress
    </div>
</div>

Thanks -Asteria

Upvotes: 0

Views: 1568

Answers (1)

Lo&#239;c Faure-Lacroix
Lo&#239;c Faure-Lacroix

Reputation: 13610

Not sure if that's what you were looking for but here's what I did...

http://jsfiddle.net/cPUuL/5/

The css:

.Imgpad {
    padding-top:2px;
    padding-left:2px;
    padding-bottom:3px;
    padding-right:2px;
}

.hidetext {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 2px;
    margin: 0px;
    color:#CC0000;
    font-size:30px;
    font-family:"Juice ITC";
    background: #000; 
    height: 96px;
    width: 96px;
    overflow: hidden;
    z-index: -1;
    transition: left 0.5s, width 0.5s;

}

.Rightbox {
    width: 100px;
    height: 100px;
    background:black;
    position: relative;
}

.Rightbox:hover > .hidetext {
    left: 100px;
    width: 250px;
    transition: left 1s, width 1s;
}

As you can see the transition speed on the .Rightbox:hover > .hidetext; is slower than the one without :hover, It means that the reverse transition will change faster than on .Rightbox:hover > .hidetext. In other words, the reverse transition is when you move your mouse out of the Rightbox.

And the html fixed. You have lots of unclosed tags and the font tag that is clearly useless there. 

<div class="Rightbox">
    <img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye" />
    <p class="hidetext">Raven Faye<br />~The Sorceress</p>
</div>

Here's an updated fiddle that change the right property since if you want to make it move to the left, you'll have to change the right corner.

http://jsfiddle.net/cPUuL/6/

The css changed is:

.Rightbox:hover > .hidetext {
    right: 100px;
    width: 250px;
    transition: left 1s, width 1s;
}

.hidetext {

    ... 
    right: 0px; /* instead of left: 0px; */
    ...
}

I also added a margin to Rightbox so we can see the change.

Using this css you can also make a cool transition:

.Rightbox,
.Imgpad,
.hidetext {
    transition: left 1s, width 1s;
}

.Rightbox:hover,
.Rightbox:hover .Imgpad,
.Rightbox:hover .hidetext {
    transition: left 0.5s, width 0.5s;
}

.Imgpad {
    z-index: 2;
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top:2px;
    padding-left:2px;
    padding-bottom:3px;
    padding-right:2px;
}

.hidetext {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 102px;
    bottom: 2px;
    margin: 0px;
    color: #CC0000;
    font-size:30px;
    font-family:"Juice ITC";
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
}

.Rightbox {
    width: 100px;
    height: 100px;
    background:black;
    position: relative;
}

.Rightbox:hover {
    width: 404px;
}

Upvotes: 1

Related Questions