If you've spent any time with Drupal, you've heard of — and likely installed — the Views module. If you haven't, then you're very likely working harder than you need to! Views is Drupal's query builder, enabling you to create lists of just about anything, as well as providing basic formatting and the ability to do basic formatting of your items.
Since most Drupal designers have used Views, they generally know its power: Yes, it will relate data to other data, sort, filter, and so on. But one very helpful feature neophytes may not have discovered is its ability to rewrite fields. In essence, a field can be added to the display, but in the settings for that field you have the option to “rewrite” that field; it will keep the settings of that field, but will masquerade as something else: it can be changed to plain text, to a link, or as in this case to a stylish hover effect.
For the hover effect just create a view with fields, add the image and all the elements you possibly want to display with the hover effect (examples might be title, description and path) and use the function "Rewrite Results" to create the hover effect. The fields with the elements to be displayed need to be before the image field and are "Excluded from display". Under the following link some inspirations for stylish hover effects (just apply the markup to the image field with "Rewrite Results" and add the css to your stylesheet):
Demo: http://tympanus.net/Tutorials/OriginalHoverEffects/index5.html
Code: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
- Log in to post comments