Embedding SoundCloud Album as if it were a Lightbox

Design help Animations & Interactions
1

Can I put a SoundCloud Album in a lightbox format?

Basically, I want visitors to be able to hover over a Play Button, click it, and it opens up the SoundCloud album on the same page (the same way that a lightbox can open a youtube video).

This is our client’s old website which has the action we are looking for: http://dev.23vivi.com/ (scroll down a bit once it opens)

Below is a screenshot of the way I currently have that section set up…I could use a little help on the hover action itself since the play button doesn’t actually show up in Preview mode.

Here is our current website progress as well: https://preview.webflow.com/preview/madison-malone?preview=41a5aef66e93a2409f4c834822b24fb0

Thanks for the help!

1920×1080 1.46 MB

2

Method I have used (not with SoundCloud, but similiar to what you are looking to do):

  1. Create a div
  2. Give the div a selector/class
  3. Set the position to be Fixed and Full
  4. Add an overlay to the div (50% opacity)
  5. Add a div to that div and embed your reference to Sound Cloud (iframe)
  6. Add a close button to your div
  7. Set the outer full screen div to display none
  8. Create an interaction to display your soundcould overlay div
  9. Assign that interaction to your Play button
  10. Create an interaction to hide (display none)
  11. Assign that interaction to the close button

You can see this in my share link on the Meet the Team section (lower part of page)
https://preview.webflow.com/preview/zulafly?preview=3204f67368b19ee4eef262a4ed66ba2b

1 Like