animating a masked image using webkit transitions - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
September 30, 2011 at 1:33 pm #34588
cass
Member
Hello,

I’ve not done much CSS before so I may be making a very obvious mistake here. Any help would be great.

I’m trying to have one image (with an empty space above it) and when this image is clicked I want another image to animate into the space above and when this is clicked it should tween back to it’s original position. But I only want the animating image to show in the area above the clickable image. I can create a mask effect my using overflow:hidden on the div for the animating image, however this prevents the image from tweening. When overflow:hidden is removed, the animation works as expected but the masking effect doesn’t. Any ideas?
October 1, 2011 at 10:39 am #88324

cass
Member

Thanks for answering. I can manage to create the correct effect on click, but without the masking. Does anyone know if this CSS click method is bad practice? If I could do it without JS that would be great as I would like this to be as light as possible. Thanks

October 1, 2011 at 1:03 pm #88328

cass
Member

I want it to tween back to the start position by clicking the animating image, do each image will only need one click action. I think that there’s something wrong in my code. Possibly the overflow:hidden should be replaced with something else? Thanks for your help!

October 2, 2011 at 7:17 am #88342
cass
Member
I’m using two actions, click one image to do one action and click another image to do another action. The problem is, when I try to mask off the animating image (using overflow:hidden) one of the animations breaks. Here’s the code for the actions and animations working as they should (but without the masking). Do you see what I mean, or am I misunderstanding something? Thanks for trying to help!
```
<!DOCTYPE html>

<html lang="en">

<head>

<style type="text/css">



#image

{

position:relative;

top:225px;

z-index:0;

width:300px;

display:block;

-webkit-transition: top 0.3s ease-out;

}



#image:target

{

-webkit-transition: top 0.3s ease-out;

top:0px;

}



#pic

{

/*overflow:hidden;*/

}



#button

{

width:300px;

height:50px;

position:relative;

z-index:1;

outline:2px;

}



</style>

</head>

<body>



<div id="pic">

<a href="#">

<img id="image" src="http://1.bp.blogspot.com/-A63dE7n3t5M/TcORJUVe-nI/AAAAAAAAAIU/ze-2dBJ5rCY/s1600/Wallpapers-Wallpapers-nature-wallpaper-snow-wallpaper-1.jpg" />

</a>

</div>

<div>

<a href="#image">

<img id="button" src="http://varolmak.com/Landscape/landscape-01129.jpg" />

</a>

</div>



</body>

</html>
```
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.