homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Transitions Animation Problem
jonreynolds




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

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.

 

jonreynolds




msg:4307247
 9:08 am on May 3, 2011 (gmt 0)

Anyone able to shed any light on this?

Thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved