Homepage Custonisation - frosted overlay

RayHeath1RayHeath1 UKRegistered Users Posts: 2 Beginner grinner
It was suggested by a support Specialist at Smugmug that I post my question in this forum for assistance, so here goes…I have visited many forums previously for information but this is my first ever participation/asking a question in a forum!

I am constructing my photography website on Smugmug…www.rayheathphotography.com and am progressively working on the content.
It is with the realisation of my Homepage that I am seeking assistance, it being a bit of a mess at the moment as I have published it at the stage where help is required. In place on the homepage is a full screen background carousel of selected images. I am happy with the carousel, the logo and title at the top and the menu bar and content (the menu buttons being live and active).

I have a particular frosted glass layer effect in mind that I want to achieve, to and over the menu bar and the background carousel images (but not the top logo/title strip above the navigation menu), with this frosted overlay effect to extend full width as well as from and include the menu bar and extend vertically downward below the normal page depth (to encourage visitors to scroll further down the page). I envisage adding a small amount of content at the scrolled down bottom, finishing with page link buttons.
Current site under construction items on the homepage will be removed when I am happy the site is finished even though it is being progressively published during works.

I wish to create 3 vertical zones on the homepage, the left one being frosted and 33% width. the central zone to be clear (not frosted and 34% width) and the right zone to be frosted and 33% width. There are to be no visible lines for these vertical zones). The frosted zones will need to of white origin (not black as in the About Page) and probably will need tweaking to achieve the final result to obscure the below carousel images by about 50-60%.
As mentioned above I have published the site where I am currently stuck. On the homepage, and as advised, I attempted to create 3 content blocks (to be the vertical zones) but was not able to position them side by side in a single line across the screen width and that would achieve the menu bar being frosted. Some blocks are currently randomly placed on the homepage with the Site Navigation one being roughly in position):-
1) I have created a left text block to be the frosted vertical zone (SITE NAVIGATION which will contain text and is 33% width and the text to be white but needs to be readable on the frosted background.
2) I have been advised the central CLEAR VERTICAL ZONE/Block needs to be 34% wide but that needs to be created & how?…a spacer block has been suggested & I thought it had been created! But appears not!...perhaps lost when trying to line up the then produced 3 content blocks!!
3) Currently on the Homepage and for the right hand vertical frosted zone I have created a carousel contained block (which will contain the same carousel that is on my ABOUT page and some text, again in white as for the left hand frosted zone). The carousel images in this r/h side frosted zone need to clear and not with the frosted overlay.

I have been advised that to achieve these works and final result will require input from this forum, particularly for CSS assistance/advice. PLEASE BEAR IN MIND THAT ANY OFFERED ASISTANCE INVOLVING CSS INPUT BY MYSELF WILL NEED TO BE FULLY EXPLAINED AND SEQUENCED AS I HAVE NO CSS EXPERIENCE OR EXPERTISE


Sign In or Register to comment.