Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konstantin Nikkari
5,185 PointsImage gallery effect with flipping images when a button is pressed
Hi,
I'm looking for a way to create a HTML site with an interactive gallery. Gallery will have two images next to each other and a button between them. When the user will press the button those images will flip to text paragraph that somehow describes those images.
Where can I find help to build these kind of effect. Supposedly I need to use HTML, CSS and jQuery.
Please check this image for better description of the effect that I'm after https://zonercloud.fi/public.php?service=files&t=1176d5c52153b494a60a801aba43fedc
Thanks!
3 Answers
Kieran Kane
10,973 PointsHi Konstantin,
Is this the effect you are looking for? http://codepen.io/anon/pen/EaeewV
As you can see, this image flip effect is triggered by a hover state. If you want to change it to a click of a button like you said, this can be achieved with Javascript.
Furthermore, here is a brilliant tutorial by David Walsh that I followed to achieve this effect for you: http://davidwalsh.name/css-flip
You should be able to follow this closely enough to tweak it for your own needs.
If you have any more questions, please feel free to ask.
Konstantin Nikkari
5,185 PointsHello Kieran and thank you so much for you help! Yes, the effect I'm looking for is exactly this :). It is just that I would like the gallery to flip when the button is pressed.
Here is a tutorial video about Macaw program. https://vimeo.com/76520522 Thing that I'm interested here is how they made the the interactive gallery. You can see the effect working at the very end of the video (13:37). The background is sliding when the button is pressed. I assume that it should be rather easy to change the action to flipping...
Konstantin Nikkari
5,185 PointsBtw. The effect that you wrote doesn't work in Safari. Chrome and Firefox is OK.