Hero style
Seeking review feedback on the screenshot below.
Some adjustments to the hero style to make it pop more.
- Adjusted CSS and template html so that the image and text are stacked - implemented using CSS grid
- Experimenting with layered hero image look. I added a duplicate version of the same image in black and white on top of the sepia image, overlaying exactly in dimensions. Then on top of this I added an svg with the same dimensions. In the svg there are circle shapes created with various sizes and positions. The svg is then used as an image mask to the sepia toned image. The resulting effect is that where there are circles placed, the image has the sepia color, and where they are not it is black and white.
- Added and updateSvgDimensions function that adjusts the positioning and sizing of the overlapping images and svg, to retain perfect overlap if the screen size changes.
- Played with title font size, and a black color backing behind to make it pop more and go with the hero image.
I'm not sure if all this should be kept. The overlapping circles are similar to what @ancarr made, just implemented directly in the code. If this idea seems interesting, I'd want to try on a version of the image without the blue circles (since we're adding them here instead), and maybe try different combinations of full color, sepia, and b/w to see what looks good. The reason I tried this vs the current version is that we could make the bubbles move slightly, which could look cool and would carry through the theme even more. @ancarr what are your thoughts?
I used black back behind the text to have it blend more into the hero image. Is there a way to make the bottom edge of the image blend more into the black? I suppose I could apply a face effect to it. OR - is there a version of this image that is slightly taller?