Streaming live at 10am (PST)

Image responsive to VW and VH + Rotates + dropshadow + Glare = HELP?!

Hello! I’m Raquel. I just started putting together my portfolio site and need some help.

I used some code to make the mouse cursor effect work, so here is the published site link to see everything more clearly:
https://raquel-pea.webflow.io

Here is the read only link:
https://preview.webflow.com/preview/raquel-pea?utm_medium=preview_link&utm_source=designer&utm_content=raquel-pea&preview=b8ef5a718b67a5d7c5db066869370692&mode=preview

I’m having trouble with the image in the left column of the grid. Instead of placing an image element, I used a DIV with a background image set to “contain”, and I made the DIV responsive to height and width of its parent element. This has enabled the background image to grow and shrink proportionally within the boundaries of the div whenever the browser shrinks in width or height. Which is great, and works perfectly in desktop mode.

The problem is that I created a “glare effect” which is essentially a circular white div with a blur filter that looks like a glare whenever the image rotates. When the mouse moves across the screen, the picture rotates, and the white “glare” div moves across the “picture” div, to replicate the look of a sheen / glare. MY QUESTION: How can I clip the circular glare div to the boundary of the background image itself, so that it can only be seen within the boundaries of the background image, instead of within the entire DIV that has the background image?

In line with this question, how can I apply a drop shadow to the background image itself, rather than to the entire div that contains the background image?

To summarize, I need to find a way to:

  1. Make the picture grow and shrink proportionally to a viewport width AND height
  2. Clip the “glare” div so that it only appears on top of the image itself and NOT outside of the boundaries of the image
  3. Add a drop shadow for the actual background image, instead of for the entire div.
  4. The glare and drop shadow need to rotate with the image

I struggled to put this in words, but I’m really hoping someone can help me out here! I will send a thousand virtual hugs to anyone that can help me solve this :slight_smile:

Set the background image to cover. that will stop the image from shrinking within the div it self and leaving either borders on the side or on top and bottom. It will then stay reactive to any screen size.

Then set the picture div to absolute and set that to full.

make picture glare static. as the picture wrapper is set no overflow. that will stop you seeing outside the image.

make sure picture is sitting above picture glare in the navigator panel.

I think that should fix 1, 2 and 4

as for your drop shadow.

You have it on a grid which you can the set the div to manual allocation across the grid. just add a div underneath the picture wrapper with the same settings as the picture wrapper, minus the overflow block. add a dark BG colour and blur it up a bit change the opacity and have that move just like the other moving parts to the same animation.

1 Like

@Tom_Tucker Glad you brought this up! The problem with this solution is that I want the picture to scale proportionally when the viewport shrinks in width and height, which is why I set the div background image to contain. If I set the div background to cover, the image will be clipped in order to cover the div.

Do you know a solution that would allow me to achieve the drop shadow and glare clipping while scaling the picture proportionally? Thx in advance!

may be the price you have to pay in order for this to work.
I can’t see there being to many screen sizes that make this image clip too extreme.

As for the glare. if you follow the above then that will solve that.
As long as my guess is correct, that you do not want the glare to go over the edges of the image.

The shadow,
I think it looks okay as it is however, if you want it to move autonomously.
the above should also work

You have it on a grid which you can the set the div to manual allocation across the grid. just add a div underneath the picture wrapper with the same settings as the picture wrapper, minus the overflow block. add a dark BG colour and blur it up a bit change the opacity and have that move just like the other moving parts to the same animation.

1 Like

@Tom_Tucker Hmm… I tried setting the background image for the picture div to cover, however anytime I shrink the desktop screen width, the image becomes awkwardly tall compared to it’s width. To fix that, I set a minimum width on the picture div, but then that caused the text on the right column to get pushed out of the viewport anytime the picture div reached its minimum width.

The only way to make it work with background set to cover is if I set a small maximum height for the picture div, so that when the viewport gets narrower, the picture doesn’t become awkwardly tall compared to its width. Problem is I want the picture to be large on larger screens.

:thinking:

Thank you for your help though! Interested to see if there are any other solutions / tips :slight_smile:

@Tom_Tucker also, I like your idea of making the drop shadow autonomous!

Hey @raquelpea,

Is this what you are trying to accomplish?

Cranked up glare and shadows to tell better <¯\_(ツ)_/¯>

@Andrew_Coderre Yes! With your modification, did the picture scale proportionally when the desktop screen height or width was resized?

I already updated the site using Tom’s suggestion of setting the picture div to “cover”… The picture no longer scales proportionally, but I figured that this is closest solution I could figure out.

If you found a way to scale the picture proportionally AND get the dropshadow and highlight clipping to work, that’d be great!! Lemme know :blush:

When I did it, I scaled it horizontally in webflow preview with my version and on your published site with dev tools and best I could tell it scaled the same.

I just looked at your live site and it doesn’t scale like that, it shrinks relative to the page.

Screen Capture
https://drive.google.com/file/d/1ltDSYrX9rP2oqqYJMjiirL_CmsD0iiKn/view?usp=sharing

Strange… maybe refresh the page? I published the update recently, here is the link again: https://raquel-pea.webflow.io

The scaling of the picture isn’t proportional any more (it just get’s cropped because of the “cover setting”), but at least on shorter screens you won’t have to scroll to view all the content… and drop shadow and glare work.

Yeah, I was curious if with your mods, could you could “shorten” your desktop screen vertically and have the pic resize proportionally, while keeping all the interactions in working order. lol Sorry if I’m doing a poor job at explaining!

To elaborate on my last response, I just meant that mine doesn’t crop the picture like the latest published, it scales because the image is set to max 100% width. I didn’t change much of anything, so it all responds relatively the same to how you had it before.

What I did:

-To crop the glare to the image, just moved the glare into the picture div and hid overflow.
-Removed the 100% height from picture and the picture as a background image.
-Used the grid child controls to ensure picture-wrapper centers vertically, already stretches horizontally.
-Added a <Image> element instead of using background image, by default <Image> has a max width of 100%, its parent element picture grows to the same size, and so does picture-wrapper.

Since the drop-shadows are cropped from one of the parents the edges scale with the image. Since I can’t visit a published version of the changes I made I can’t test the vertical scaling but its within a grid and only using max size parameters, I expect it wouldn’t have any problems or not anything that isn’t hard to resolve. Could add max-height: 100% to the <Image> to specify that it can only be as tall as its parent, or something along those lines.

1 Like

Also incase you don’t know; you can place your custom CSS in an <Embed> inside the designer instead of page settings, and it will display the vast majority of it. Can make it easier to design around then move it to the page settings before shipping, its personal preference though.

1 Like

@Andrew_Coderre Wow, thanks for all the tips! You’re awesome. Also, glad you pointed out that I can place the custom CSS in an embed… that will save a ton of back and forth when previewing! There’s so much to learn in Webflow, but it’s so much fun… I’m finally starting to get the hang of things. Now I have to learn the 98% of other tricks and techniques I don’t know. lol

1 Like