Minor Design / Animation Help

Hi :slight_smile: I’m new to webflow and I’m really enjoying it.
Although I do need some minor help…

I saw Apple’s website and I really like this part of their site, Ethics and Compliance - Apple

I tried to re create the layout, but column and grid is having issues… (maybe my lack of knowledge)

  1. How can I put an image in a grid, to mimic that effect?

Mainly, I am also trying to have a new image fade in when the “plus” icon is clicked
And fade out when the x button is clicked.
2) How would I go about doing that?

I’m pretty experienced in most design softwares and other website builders so I can learn fast if I need to be directed to a youtube tutorial.

Thank you please let me know, excited to continue with webflow :slight_smile:

hi @OPTION1 button only toggle image appearance. So you can put image in absolute position relative to its parent and then create animation to toggle its visibility and add event listener to this button to toggle class eg. hidden. I thing you may be able to do this in WF animation too .

When it comes to your issue with HTML construct and CSS there is many youtube channels that will help you with understanding how things works.

The best way to get accurate help is to follow forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  1. Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this: @OPTION1
1 Like

hi :slight_smile: thank you @Stan . I appreciate your quick response!

That makes sense immediately… although I can’t seem to find “button only toggle appearance” any where on forums either. Is it worded differently?

Appreciate it :slight_smile:

Also quick side question, (noob question)
When i copy and paste elements, it works fine (Ctrl+c, Ctrl+v), but when I edit my elements, they effect the past elements.

Is there a way to edit my copied elements without remaking them? I tried renaming class but it renames both.

It seems like a simple fix

hi @OPTION1 I will recommend to visit WFU to get at least basics about this platform and search forum as it is great source solutions or browse internet before you post requests. the keyword you are looking for is “toggle button” “toggle animation” etc.

1 Like