17. Mai 2015

Create a simple Text over Image Overlay on Hover with Drupal 7 and Views

Note: nur englisch.

It looks very nice to have images on the website which get dark on mouse hover and link to a certain page. In this tutorial, I want to show how it is done with Drupal 7 and the module Views.

Install and enable the modules Views and Link.

Create a content type 'overlay-image'. In the tab Manage Fields add the field 'Image'. You can leave the settings as default. Add another field 'Link'. In the field type selection list you can now choose 'Link', an option which was added by the Link module. Edit the field 'Link' and uncheck 'Absolute URL'. The rest you can leave default. In Manage Display hide the labels. The Link format is 'Title, as link (default)'. Save your settings. 

I added two basic pages 'Whales' and 'Dolphins'. They display some custom text about the animals. They have a menu point and the path /testsite/whales and /testsite/dolphins. (I have no top level domains - like '.com' etc. on localhost). Later on the images on the front page will be linked to these pages.

Then I created two overlay-images, one 'Dolphins' and one 'Whales'. These are the images for the front page, each of them have an own node. Upload the image and edit the Link. The Link Title will later be displayed on mouse hover. The URL is the path of the basic page. No menu point.

Create a view 'Overlay'. Create a page which shows content of type 'overlay-image'. It shows an unformatted list of fields. Save and edit. On the edit page, add the fields 'Content: Image' and 'Content: Link' to the fields and exclude them from display.  For the last field add 'Global: custom text'. In the text field, write

<ul class="img-list"><li>[field_image]<span class="text-content"><span>[field_link]</span></span></li></ul>

If you...

Faennj - which is not art abonnieren