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!

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


Image gallery effect with flipping images when a button is pressed


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


3 Answers

Kieran Kane
Kieran Kane
10,973 Points

Hi 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.

Hello 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...

Btw. The effect that you wrote doesn't work in Safari. Chrome and Firefox is OK.