Welcome to WebmasterWorld Guest from 23.20.230.24

Forum Moderators: not2easy

Message Too Old, No Replies

Transitions Animation Problem

     
1:55 pm on Mar 31, 2011 (gmt 0)

5+ Year Member



Hi folks,

Not sure how to describe this other than showing you some code and describing the desired effect required.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

div.box {
z-index:0;
height:100px;
width:100px;
border: 1px solid black;
margin: 5px;
}
div.static {
position: absolute;
height:100px;
width:100px;
}
a.exp {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-transition: all 0.5s ease-in-ou
display:block;
z-index:1;
height:100px;
width:100px;
border: 1px solid green;
opacity: 0;
position: absolute;
}

a.exp:hover {
display:block;
opacity: 1;
height:400px;
width:400px;
position: fixed;
left:250px;
top:200px;
}

</style>
</head>
<body>
<div class="box">
<a style="background:yellow;" class="exp" href="">s</a>
<div style="background:yellow;" class="static"></div>
</div>
<div class="box">
<a style="background:red;" class="exp" href="">s</a>
<div style="background:red;" class="static"></div>
</div>
<div class="box">
<a style="background:blue;" class="exp" href="">s</a>
<div style="background:blue;" class="static"></div>
</div>

</body>
</html


Basically, as you hover over the coloured squares, they should enlarge (animated via transitions) and be located at the same location to the right.

The animation and location of the enlarged square works, but the only thing that is not quite right is where the transition starts.

Regardless of which square you hover over, the transition always seems to emanate from top-left of screen. I want it to emanate from the square being hovered over.

Is this possible?

Thanks in advance!

Jon Reynolds

P.s. as I'm sure you know, you need to view this in a browser that supports transitions. I have been using Chrome.
9:08 am on May 3, 2011 (gmt 0)

5+ Year Member



Anyone able to shed any light on this?

Thanks.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month