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 named the fields differently, you will find the fields in Replacement Paterns. Apply. Click 'rearrange' and remove the title. Save the view.

On home > Administration > Configuration > Site Information, set 'overlay' as the front page.

Put the following code to your css:

ul.img-list {
    width: 640px;
    height: 425px;
    margin: 0 0;
    padding: 0 0;
    list-style-type: none;
}

Since Bartik is not responsive, I set the width and height the same as the images have. You can make it also with 100%, the image size must then fill out the container in every case. The size of the dark overlay corresponds to the sorrounding box, not to the image.
Set the list items to 100%. Set the overlay to 100%, make it transparent and only opak on hover:

ul.img-list li {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
span.text-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}
ul.img-list li:hover span.text-content {
    opacity: 1;
}

Place the link in the middle of the box and style it:

span.text-content span a {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    color: #a5a5a5;
    text-align: center;
    text-decoration: none;
    font: 2em sans-serif;
}
span.text-content span a:hover {
    color: #fff;
    text-decoration: underline;
}

Now the images are placed above each other. We adjust the css and have the images smaller and next to each other:

ul.img-list {
    width: 640px;
    margin: 0 0;
    padding: 0 0;
    list-style-type: none;
}

ul.img-list li {
    display: block;
    position: relative;
    float: left;
    width: 40%;  
    height: auto;
    margin: 0 5%;
}

ul.img-list img {
   position: relative;
   float: left;
   width: 100%;
   height: auto;
}

 

It looks like this:

That was it. Have fun:)

Credits: I got the basics for this tutorial from a tutorial at Geek Girl Life. It´s a helpfull tutorial. Thanks for that.

 

Neuen Kommentar schreiben

You must have Javascript enabled to use this form.