Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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