Overlays in website design add depth to the design and emphasis to important content. These overlays – transparent, semi-transparent, blurry, warped, frosted – can be easily achieved using transparent PNGs or the CSS opacity property, making editing much simpler. Reducing opacity to 50% makes a semi-transparent layer through which a background image can be seen yet does not interfere with text. This allows designers to use large background images and retain their continuity while allowing a great deal of flexibility in web design in different sections of the web page – menu dropdowns, quote windows or bubbles, banners, background images and more.
Subtle or fancy effects can be created using blurred backgrounds, image tinting, frosted glass, gradient fades, and transparent overlay techniques. Transparency on hover can add buttons on product images on rollover – subtle and not intrusive. This way you provide additional information to the user when needed, while keeping the user on the same page without redirects.
Be careful not to overdo the transparency effects. Aim to make your site unique and functional, while adding a sense of realism, variation and depth with opacity and overlay techniques.
Check out these website templates with cool overlay effects!
Red, white and black make a dramatic statement in this website template.
The header photograph has a color overlay in red and below the content
on white is a panel showing a lock with a grey overlay effect.
The red theme is continued with a red logo and red menu dropdowns,
dates and rollovers. Photos in text panels below have security-related
photographs with overlays in a lighter shade of red. The gallery
photographs are treated in this same shade and can be viewed by
category. The blog features content on security-related issues and products.
White, yellow and black make a striking combination in this template
for a rock band. The large central image on the homepage has info-boxes
in white or photos with overlays in a luminous yellow that prompt a viewer
to watch the latest show or videos of the band. The homepage leads to
the Gallery with zoom on hover, which can be viewed by category,
popularity, date or name. The scrolling sidebar highlights important dates.
The footer shows upcoming events in scrolling test on an image overlay.
The Blog is an opportunity to engage with fans and audiences, with write-ups about the shows.
A transparent blue overlay on the image is continued into the menu with
more opacity to allow for better readability of text, provide depth and separation of web design elements. The menu has orange dropdowns. Red is used for menu and text highlights. Circles, a popular design trend, are used for the red and white logo and orange graphics on white circles which highlight the usage of the lab. Text animations on the header, content headlines call attention to important content or prompt user action on buttons. The site has image animations on scroll. Projects can be viewed individually in a smaller size in the gallery, or sorted into categories and enlarged on image click.
This purple and grey template with its decorative logo and large fonts;
menu, image and background banner image overlays; homepage slider
with welcoming images of the hotel; images in circles and a neat booking form, presents a hotel and its attractions at a glance. The gallery can be viewed by category. Just use the readymade template add-ons like slider and gallery layouts, social plug-ins, videos and icons, to add pizzazz to your site.