homepage Welcome to WebmasterWorld Guest from 54.166.39.179
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Transitions Animation Problem
jonreynolds

5+ Year Member



 
Msg#: 4290137 posted 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

5+ Year Member



 
Msg#: 4290137 posted 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