# Flip tile once selected **URL:** \ **Category:** CMS Development\ **Tags:** looking-for-feedback\ **Created:** [June 10, 2019, 10:56am UTC](https://community.hubspot.com/t/flip-tile-once-selected/14716 "2019-06-10T10:56:58Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![CandiceLloyd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/candicelloyd/32/31851_2.png) [@CandiceLloyd](https://community.hubspot.com/u/CandiceLloyd)\ **Post date:** [June 10, 2019, 10:56am UTC](https://community.hubspot.com/t/flip-tile-once-selected/14716/1 "2019-06-10T10:56:58Z")
“I’m wondering if we can change the functionality of a page. Ideally, the page would have the events organized in tiles of three horizontally. The front of the tile would have the graphic, title, and date of event. After the tile is clicked on, it flips over without the page changing and additional write up and details are on the flip side (including link to register).Maybe not load it… but have a link to it as well as the detailed description of the event that is already listed?? Not load the event… but have a link to it as well as the detailed description of the event that is already listed??” How would I go about implementing this? This is not something I have done before. I appreciate any help and feedback. Regards, Candice ---
**Author:** ![Jenny](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jenny/32/24_2.png) [@Jenny](https://community.hubspot.com/u/Jenny)\ **Post date:** [June 17, 2019, 8:42pm UTC](https://community.hubspot.com/t/flip-tile-once-selected/14716/2 "2019-06-17T20:42:25Z")
Hi @CandiceLloyd, Are you referring to setting something up like [this](https://www.w3schools.com/howto/howto_css_image_overlay.asp)? Additionally, [@AJLaPorte\_diagr](https://community.hubspot.com/t5/user/viewprofilepage/user-id/202) helped a user with a similar request in [this thread](https://community.hubspot.com/t5/CMS-Development/Need-help-creating-CSS-for-hover-functionality/m-p/182070). Here is another [conversation](https://community.hubspot.com/t5/CMS-Development/Need-help-with-hover-effect-on-overlay/m-p/34577) on the Community discussing the same thing. If you are looking to create something else, please let us know. The more details, screenshots and links (including examples) that you can share, the better the Community can assist. Thank you, Jenny ---
**Author:** ![CandiceLloyd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/candicelloyd/32/31851_2.png) [@CandiceLloyd](https://community.hubspot.com/u/CandiceLloyd)\ **Post date:** [June 21, 2019, 9:21am UTC](https://community.hubspot.com/t/flip-tile-once-selected/14716/3 "2019-06-21T09:21:46Z")
Hi Jenny, Thank you so much for the feedback and additional links. I will have a look through them and see what I can apply to our website. Kind regards, Candice ---
**Author:** ![AJLaPorte\_diagr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ajlaporte_diagr/32/24548_2.png) [@AJLaPorte\_diagr](https://community.hubspot.com/u/AJLaPorte_diagr)\ **Post date:** [June 17, 2019, 8:56pm UTC](https://community.hubspot.com/t/flip-tile-once-selected/14716/4 "2019-06-17T20:56:23Z")
Hi @CandiceLloyd, I found this codepen that may be a good start to helping you get the basic card flipping down: [https://codepen.io/Zacaree/pen/ZvQjOG](https://codepen.io/Zacaree/pen/ZvQjOG) Essentailly they are using JS to toggle a class on the card with the onclick event. You could use this as a base and then add in the HubL for the events. How you choose have the events generated would be up to you. You could do this one of two ways: 1. Manually through a repeating group in a custom module. You could then use a page selector in the module to allow them to link the “More Info” button on the back of the card to another page either on the CMS or externally. Note: doing it this way would mean that when an event is over, you would most likely have to go in and manually delete the event card. 2. (Recommended) Using HubDB to generate the events and list them out. Using the Dynamic pages with HubDB would allow you have the ability for them to click a button in the info part of the card and be redirect to a page with more details on it. The benefit of this is the ability to add parameters on the items that would be pulled in so you could have past events be skipped from pulling onto the page. For more information on HubDB, see here: > **[HubDB - HubSpot docs](https://developers.hubspot.com/docs/cms/start-building/features/storage/hubdb)** > > Build data-driven content with HubDB, HubSpot's native database tool. > **[Build dynamic pages using HubDB - HubSpot docs](https://developers.hubspot.com/docs/cms/start-building/features/data-driven-content/hubdb/overview)** > > Learn how to build dynamic website pages using HubDB data. For info on using repeating fields see here: > **[Module and theme fields - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/fields/module-theme-fields)** > > HubSpot has many different field types, you can use to add flexibility and customization to your themes and modules. Hope this helps point you in the correct direction! ----------------------- AJ LaPorte [www.wearediagram.com](https://www.wearediagram.com) ---
**Author:** ![CandiceLloyd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/candicelloyd/32/31851_2.png) [@CandiceLloyd](https://community.hubspot.com/u/CandiceLloyd)\ **Post date:** [June 21, 2019, 9:23am UTC](https://community.hubspot.com/t/flip-tile-once-selected/14716/5 "2019-06-21T09:23:49Z")
Hi AJ, This is perfect thank you, so much information which will be incrediably useful! Thank you for all your effort and going into detail, I am positive that I will be able to use something from which you have provided. Thank you again! Kind regards, Candice