Twitter Facebook RSS Logo Logo

Transparent Overlays In Website Design

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!

Color overlays

Template 50507 – Security Pro Drupal Template with Gallery and Blog

Template 50507 - Security Pro Drupal Template

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.

Template 50622 – Business Responsive Joomla Template

Template 50622 - Business Responsive Joomla Template

This template in blue, white and grey features a central photograph
with color overlay in aquamarine blue.  Circles and icons convey
important information with text appearing or changing color on hover.
Services are presented in a gallery and can be viewed by category
and leads to the blog with informative content, login form and search box.

Template 50601 – Rock  Band Responsive Joomla Template

Template 50601 - Rock Band Responsive Joomla Template

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.

Template 49151 – Bridal Boot Camp Responsive Website Template

Template 49151 - Bridal Boot Camp Responsive Website Template
Color overlays on images in a banner along with purple and mustard
rollovers call attention to the services of the company. This template
features  a logo of interlocking rings in white on a purple textured
background with mustard panel contrast and a homepage slideshow
with grid animation.  Names of people appear on hover to lend authenticity
to the testimonial section.

Template 50688 – Science Lab Responsive Website Template with Gallery

Template 50688 - Science Lab Responsive Website Template

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.

Template 50553 – Hotel Responsive Website Template

Template 50553 - Hotel Responsive Website Template

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.

Template 50730 – Water Polo Responsive Website Template

Template 50730 - Water Polo Responsive Website Template

A central image of water polo accessories in a water splash with a cool
blue overlay highlights the changing messages in white in the slider.
The header and menu are designed in shades of blue with the blue logo
on a white circle. Below the slider, a grey banner welcomes members
to the water polo club. Blue icons and text on a light grey background
highlight important content. Images of members are shown in an image
carousel in the gallery.

Template 50723 – Taxi Responsive WordPress Theme

Template 50723 - Taxi Responsive WordPress Theme

The homepage graphics include a grey and white city skyline and a
chequered design symbolic of taxis. The homepage slider with image overlay  sell the benefits of the cab service. Black and yellow circles
with quotation marks and people graphics call attention to the testimonials
presented on a grey photo banner with overlay. Services are shown in an
accordion panel.  The taxi fleet is showcased in the gallery and can be
viewed by category. Content can be uploaded in image, slideshow, gallery,
video and audio formats. The blog provides useful content.

Dark overlay

Template 50665 – Videographer Responsive WordPress Theme

Template 50665 - Videographer Responsive WordPress Theme

This template is designed in shades of grey with yellow and white
elements. The background image has a dark semi-transparent overlay
on it which provides a “there but not there”  feel to the image while allowing
the yellow circles with icons to stand out and draw attention to the company’s capabilities.  The yellow circles turn to white ovals on hover.  The videos below stand out in full color in circles with hover effects.   The gallery with semi-transparent hover effects can be viewed by category and the blog with large images is a platform to present case studies and  and engage with  customers.

Template 50704 – Airport Airlines Responsive Joomla Template with Gallery and Blog

Template 50704 - Airport Airlines Responsive Joomla Template

The advantages of the airline are presented in bold text on the image slider
with photo overlays which make the text easy to read. The arrow buttons
on the image slider lead you to the page mentioned on the header, with
detailed content supporting the claims made.  The menu on the inner
pages continues the darkened homepage image of clouds with the tip
of the aircraft’s nose visible only if you’re looking for it. The homepage
features a thumbnail gallery with images that enlarge on zoom.  White
and grey serve to segment the content, making it easier to read.  Icons
highlight important facts. News is presented in a blog with comment
forms and social sharing icons. The gallery has image zoom and
text animation on photo overlays on hover while enlarged images are
shown in natural color.  The gallery can be viewed by category, date
and popularity.

Texture and color overlay

Template 50619 – Construction Bureau Responsive Joomla Template

Template 50619 - Construction Bureau Responsive Joomla Template

Green and white have a clean and eco-friendly look. The image slider
with textured overlay features text highlighting the company’s strengths.
The same treatment continues below with testimonials  and images in a
|carousel. The drop-down menu in transparent green allows the texture
to show through. The homepage content on white gives a picture of the
company at a glance, using modular tables to display different sections
of the content , when headers  like How to Order are clicked.  Below is a
Quick View scrolling project gallery ordered by date.  Images lead to more
information on the project.   The site has more detailed information in different sections like a project gallery and blog with login form and search box on the right, inviting customer response or visitor feedback. Large fonts on white space draw attention to important content.

Photo blur and large background overlays

Template 50609 – Horse Breeder Responsive WordPress Theme
Template 50609 - Horse Breeder Responsive WordPress Theme

 

Template 50609 - Horse Breeder Responsive WordPress Theme

The large background image of a beautiful horse running arrests the eye
immediately. A photo blur of the image captures its movement, while the
nav bar on top expands to reveal a drop-down menu. A transparent image
overlay makes text easy to read. Colorful graphics on a yellow banner lead
to blog content on special events organized by the horse club. Below, another image of a horse in action with photo blur and transparent overlay is shown. The gallery  in image, slideshow, gallery, video and audio formats can be viewed by category, showcasing all the fine-looking horses and their riders or owners. The blog is a platform to provide useful information, riding tips and images of the horses and engage with customers and horse-lovers.

Grid-based overlay

Template 50663 – Creative Personal Page Responsive WordPress Theme
Template 50663 - Creative Personal Page Responsive WordPress Theme

Images, textures, transparent overlays, zoom and hover effects add depth and variety to this grid-based template for a personal website.
The gallery with transparent hover effects can be viewed by category
and the blog with large images presents content of interest to the target
audience.

Template 50109 – Politician Drupal Template with Gallery and Blog
Template 50109 – Politician Drupal Template

 

Green, blue and white create a pleasant and trustworthy feel for a
politician’s website. The full-color image of a man contrasts with the
more subdued image of a government building with a grey photo overlay
on which text in white capitals spells out the candidate’s message on the
slider. Blue bands with icons and green rollovers lead the eye and prompt
the user to read the key messages.  Text animations in white on green
rollovers in the photo grid below draw attention to various concerns of citizens. Large text leads the reader to different parts of the blog, through which the candidate can engage with the audience.  The gallery can be viewed by category.

Light overlay

Template 50603 – Business Responsive WordPress Theme 

Template 50603 - Business Responsive WordPress Theme
A semi-transparent overlay on a large background image provides a
muted yet sophisticated look in this business template.  Pale shades of
grey combine with green and dark grey for the menu with hover effects.
White icons stand out on green circles  that rotate on hover and text panels
turn from grey to green while text colors change to remain readable.  The
gallery can be viewed by category and the blog engages visitors and
customers with helpful content.

Template 50532 – Magic Show Responsive WordPress Theme

Template 50532 - Magician Responsive WordPress Theme

This stylish template blends opacity and transparency to evoke the real
and the magical in different sections of the website. The semi-transparent
dark menu over an image of the magician, along  with light overlays  below
on his hands  while doing a show, add continuity while scrolling down the page, while creating text panels  with graphics of a magician that turn opaque on hover for better readability of text. Other images in color with captions on a transparent layer zoom in on hover and lead to the blog.

Template 50527 – Tennis Club WordPress Theme with Gallery and Blog

Template 50527 - Tennis Club WordPress Theme
Large white fonts stand out on a semi-transparent overlay overlapping
a large image of a tennis player.  Other photographs are also presented
with an overlay effect in a different tint. On scrolling down, the menu
becomes a pleasant shade of green, and white text in the content panels
is also presented on green to match.  The background is in pale grey.
The gallery can be viewed by category and the blog engages from visitors
and customers.

Transparent overlays

Template 49524 – Billiards Drupal Template with Gallery and Blog

Template 49524 - Billiards Drupal Template

The transparent overlay treatment in this Billiards Drupal Template
allows for a much larger picture with the website design elements subdued
until required for use. Transparent panels overlaid on the central image turn to green, yellow and red on rollover.  The menu is transparent with green drop-downs. A slider banner highlights different promotions. Photos of champions are shown in a flexslider with captions.  A banner leads to the gallery which can be viewed by category.   The blog with a poll engages players and provides useful tips.

Template 50620 – Modern Church Responsive Joomla Template

Template 50620 - Modern Church Responsive Joomla Template

This website template features a contemporary logo design, a central
image with photo overlay on which white text stands out, simple and
clear typography, use of white space with orange highlights, a gallery
that can be viewed by category and leads into more information, a blog
with informative articles of interest to new or existing church-members
or seekers.

Text window on image overlay

Template 49419 – Wakeboarding Runner Drupal Template with Gallery and Blog

Template 49419 - Wakeboarding Runner Drupal Template
This template in blue and white evokes the cool blue ocean and the
thrill of riding the white frothy waves in the wake of a motorboat. A grey
overlay on the central image of the wakeboarder retains the viewer’s
interest while directing his eye to the text. The flat layout and clean design
highlights the logo and menu and thin grey lines separate different sections
of the page.  Orange highlights appear in the menu and buttons. The menu
stays fixed as you scroll down the page, for ease of navigation.   More
pictures and text featuring wakeboarders are presented in panels below,
leading to the blog, which provides useful tips and engages with wakeboarding enthusiasts.  Videos are placed on another image of a wakeboarder with blue transparent overlay on which text and videos stand out. The gallery with impressive images of wakeboarders in action can be viewed by category.

Template 50725 – Drugs Store Responsive PrestaShop Theme

Template 50725 - Drug Store Responsive PrestaShop Theme

Green and light red on white give a clean, healthy appearance to this
drug store Prestashop template.  The overlay on the central images in
the image slider tones down the picture while allowing text to stand out.
Banners highlight special offers. A long banner also has an image overlay
with text highlighting a special offer. Quick View semi-transparent buttons
appear on hovering the product images, leading to product descriptions,
pricing, product images with zoom and carousels, social media icons and
shopping cart.   The footer has useful links for ease of navigation. Account
sign-in, shopping cart, currency options and search are prominent on the top.

Template 50807 – Spices Responsive PrestaShop Theme

Template 50807 - Spices Responsive PrestaShop Theme
This template has an attractive look with its  combination of natural
colors in red, yellow, mustard and green. The menu and banners form
a natural frame for the central image of spices with a semi-transparent
overlay on which the text stands out in white capitals.  Behind the overlay
the same image of spices can be seen on both sides in full color, adding
depth to the layout. There are arrow accents on the wide drop-down menu
and scalloped-edge banners that animate to arrows on hover.  The logo
in red is highlighted on white with dotted lines, which are also used to
segment different parts of the homepage. Featured products are shown
in a grid with image zoom and semi-transparent Quick View buttons
appearing on hover, leading to product pages with product descriptions,
pricing, product images with image zoom and carousel, social sharing
icons, shopping cart and payment options. Text boxes in solid colors with
scalloped edges on the homepage draw attention to promotional content
and have animations on hover on icons, arrows, and text. Ribbons and
buttons highlight special offers and stock availability. Sign-in, search,
shopping cart and payment options are prominent on top.

Background image with overlay

Template 50747 – Motorcycle Sport Responsive PrestaShop Theme

Template 50747 - Motorcycle Sport Responsive PrestaShop Theme

The header with logo, search and shopping cart buttons are placed on a
transparent overlay on the image of a motorcycle, which stays visible on
the right of the page as you scroll down.  The menu and important links on
top are on textured black bands with red rollovers. The image slider shows
stunning images of motorbikes.  Below the slider, banners with zoom options
place emphasis on the products and captions in red.  Quick View and Add
To  Cart buttons appear on hover on the featured products in the grid. Quick
View  semi-transparent buttons lead to product descriptions, pricing, product
images and carousels, social media icons and shopping cart to prompt buying.
At the bottom right of the homepage, custom blocks of content stand out
on an overlay on an image of a bike, with icons displayed in circles.  The
same background image with shadow is continued in the footer area, lending
design continuity.

 

More templates with overlays from our collection:

Template 48576 – Gift Store Responsive OpenCart Template
Banners in color tints or grey overlays immediately draw the eye  and provide contrast
Template 48576 – Gift Store Responsive OpenCart Template

Template 49007 – Law Responsive WordPress Theme

Dark overlay for the background  image plus color overlays for banner images
Law Responsive WordPress Theme

 

Template 49390 – Business Responsive Joomla Template
Transparent overlay with a red color tint
Template 49390 - Business Responsive Joomla Template

Template 49475 – Photo Gallery Template with Integrated Moto CMS HTML
Diamond shapes, background images with transparent overlays, banner
with photo blur.

Template 49475 – Photo Gallery Template with Integrated Moto CMS HTML