Eye Catching Menu Blocks

Images, as menu items, instead of just words can make a far bigger impact on visitors.  Go one step further and make the images standout with cool effects.  We are all prone to loss of interest which is why images draw us in much more so having that extra little something else to definitely draw the eye.  Did you see the way the items at the top of this inspiration page grow and get brighter when you hovered the mouse over them? That is just one of many possible effects.

In the examples below, we are back with Lottie and her gallery site.  This time we are using image blocks to attract visitors to the 3 different galleries of pictures, Nature, Weddings and Architecture. But they are not just images, what we see are 3 different set of effects in play.

The first shows 3 greyscale images which may seem dull but hover the mouse over the images and see them bloom into colour.  It is this transition effect that catches the eye.  Have a go and see

This time the images start as colour but hover over them and see the images flip.  Again another transition to add character to your menus.

In the next set we can see just colours, they are big and bold and will definitely be noticed but no images?  Again hover over the blocks to see the images appear, further emphasising the object of the block

For our last set of examples let’s aim high.  How about a stunning Landing Page with a fun image of Lottie along with her Site title. 

At the end of this we have our full block stretched across the page.  The  effect this time is to scroll down the image, we start with the top of the image and end at the bottom as we hover.  Try it out and this time click on the links to see Lottie’s photos

Lottie's Gallery

Lottie's Gallery

Captions can be added to any image (whereas examples above have had text over the image).  But there are times when more information is required along with the image and any great effect.  Image Boxes are the way forward adding Titles and Descriptions to images.

Below we have content from a nail bar showing some special offers on different styles.  As well as the added text you can see that the hover will grow the image and add vibrancy via additional luminosity. 

Stunning Reds

Vamp your night out with a range of red varnishes

Multi-coloured

Dress up your fingers individually

Vibrant Blue

Standout from the crowd

Funny Faces

A bit of sense of humour goes a long way

Below we have further examples but with round images.  Our friendly photographer, Lottie, is using Image Boxes to highlight the different services she offers and so the images are not acting as links.  So to add effects the images float and darken upon hover.  And to further her message, Lottie has added  lightboxes to each image so that a larger example of her work in that area.

Studio

Visit my studio for portraits and Family shots.

Personal Touch

Take me with you on a family day out, wedding or party and relax knowing the day is captured.

Staging

Create great product images for websites and brochures

Prints

All my personal shots are available as framed prints

Enhance

Let me enhance your own photos, remove red eye, adjust focus and colour to bring put the best of your subject

Lottie also takes it a step further by adding the Image Boxes over the top of a full page image to highlight her wedding photography services.  This time no hover animation but instead of a menu link to another page (such as a gallery page in her menu’s earlier) this time Lottie displays Price Tables when the image is clicked.  Go ahead and click on the “Capture the whole day” image to see an example.

Lottie's Gallery

Wedding Photography

Capture the whole day

Let me capture the whole day from arrival, post service, reception and evening.

The Service

Single session during and after the service.

The Evening

Add to your day and your social media/ website with a collection of party pics

Hen Night

Start the wedding off with an evening of great images.

So far the examples have been based around adding links to images to enhance the styling of a website. In other words not using buttons.  But there is a way to improve the look and feel of buttons when the visitor has a choice of where to go next.  Colour and Icons can be added to direct the eye to those choices. These are known as Dual Buttons.  In a simple example below we can see a consultancy company is giving its visitors a choice of booking a session or asking a further question.

Like what you see, so what next?

If more than one set of options are to be presented then the buttons can be presented vertically

But returning bacck to the topic of this inspiration page; lets add images to the buttons.  As example from fasionshack, what do you want to shop for, woman or men?

My Latest Nature

Showcase

My Latest Wedding

Showcase

My Latest Architecture

Showcase

Full Day

£ 500
  • 3 large portrait
  • 250+ Album shots
  • Service, Reception and Evening

Dutch Barn

Sizes Available:
2400mm x 2400mm (8′ x 8′)
3000mm x 2400mm (10′ x 8′)
3530mm x 2400mm (12′ x 8′)

Ridge Height: 2667mm (approx 8′ 9′)

Door: Ledged and Braced

Window: 3 Pane Joinery Opening

Loft: Internally Braced

Additional Options:
19mm Loglap cladding
Tanalised wood treatment
22mm Heavy duty flooring
Stable Door
Heavy duty galvanised door hinges
Security padbolt protector
Safety Glass
Ramp
Heavy duty roof felt
Window boxes (large or small)
Georgian style windows

Dilly's Daycare

Contact Us