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:
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:
- Make the picture grow and shrink proportionally to a viewport width AND height
- Clip the “glare” div so that it only appears on top of the image itself and NOT outside of the boundaries of the image
- Add a drop shadow for the actual background image, instead of for the entire div.
- 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