How to Create a Blend Mode Lightbox Button in Webflow

John
August 18, 2022

The blend mode feature in Webflow allows you to create so many unique elements and designs! In the above video tutorial I go over how to create a Lightbox button in Webflow with a blend mode applied to the mouse cursor circle. The cursor then changes color when you hover over the button and the text changes color as well.

To clone the interaction for free into your own project click on the following link: https://webflow.grsm.io/interaction?interaction=webdev-for-you-interaction-160.

The steps to create this interaction are as follows:

Step 1: Create the mouse cursor element and animation

  • Add a section to the site and name it “section.” Set the min-height of the section to 100vh and set the display setting to flex, horizontal, align center, and justify center so that anything that is placed in the section will be in the center. Give the section a dark background color like black (design can vary, but using colors used in video.)
  • Next add a div block and name it “mouse-circle.” Set the width and height of this element to 10px in width and 10px in height so it is a perfect square. Set the background color to white and set the border-radius to 50% so it is a perfect circle. Under “Effects” in the styles panel select “Blending” and change this option to “Difference.” This will change the color of the circle one hovered over different element. In this case we are using black and white so when over a white element the circle will turn black and vice versa.
  • Next go to interactions and create a “Page Trigger” interaction. Select “When mouse moves in viewport.” Here create an interaction and on the x-axis move the “mouse-circle” to -50vw at 0% and 50vw at 100%. This will follow the mouse cursor left and right. On the y-axis move the “mouse-circle” -50vh at 0% and 50vh at 100%. This will move the “mouse-circle” up and down with the mouse cursor.”
  • Adjust the smoothing to vary the element movement when the mouse moves.

Step 2: Create Lightbox button structure

  • Add a Lightbox element, remove the image, and name the element “button-wrapper.” Set the display setting to flex, horizontal, align center, and justify center. Give it a width of 150px and height of 150px so it’s a perfect square.Set the position to relative. Add a border-radius of 50% so it is a perfect circle.
  • Inside the “button-wrapper” add another div block and name it “button-bg.” Set the position to Absolute and Full. Give it a border-radius of 50% and a solid white border with 1px in width. The background should be transparent.
  • Inside of the “button-wrapper” add another div block and name it “text-wrapper.” It should be in the center. Set the position of this div block to relative. Add a text block inside of the “text-wrapper” and name it “first-text.” Choose any font you’d like and set the size so it fits in the button. In this case I used a size of 22px and a line-height of 1- which is essentially 100% line-height of the font size. Set the color of this text to white (colors can vary depending on design).
  • Next copy and paste this “first-text” text block. Duplicate the class and name it “second-text.” Set the position of this text to Absolute and Full and change the color to black. The “second-text” should now be on top of the “first-text.”

Step 3: Create animation for Lightbox button

  • Select the “button-wrapper” and create a hover interaction so an animation occurs when we hover over the button.
  • On hover in set the initial state for the “second-text” to move down 100% on the y-axis and set the opacity to 0%.
  • Then move the “first-text” up -100% on the y-axis and set the opacity to 0%.
  • Next move the “second-text” back to 0% and set the opacity to 100%. This will create the text change on hover.
  • After that select the “button-bg” and set the bg color to white and scale it to 1.3.
  • Select all the elements that are being animated and set the duration to .2 seconds and the easing to “Ease.” (Speed and easing can vary for your design).
  • Duplicate this animation for the hover out effect. For the hover out effect delete the initial states and reset all the elements back to their original states. In this case the “first-text” should move down back to 0%, and the opacity set to 100%. The “second-text” should move down back to -100% and the opacity to 0%. The background color for the “button-bg” element should be set back to transparent and the scale back to 1.

Step 4: Scale the “mouse-circle” when hovering over the text

  • Select the “text-wrapper” and create a hover interaction.
  • On hover in select the “mouse-circle” and create a “size” interaction. Set the size to 30px in height and 30px in width (using scale distorts the circle when it gets larger so we use size in this case).
  • On hover out duplicate the hover in animation and set the size back to 10px in width and 10px in height.
  • Set the speed to .5 seconds and the easing to “Ease.” (Speed and easing can vary for your design).

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine