Transitions Animation Problem

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.

Transitions Animation Problem

jonreynolds

jonreynolds

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week