Skip to main content
OCLC Support

Clickable preview image to expand

  1. Last updated
  2. Save as PDF

 Link:  See a live example.

 View:  View source code in CONTENTdm Cookbook Demo Site.

On the item-detail page, there is an Expand button in the upper-right corner of the preview image that opens the image or PDF viewer. This recipe was developed based on the request to make the Expand button more intuitive and convenient to use.

This CSS recipe stretches the Expand button so that it covers the entire preview image and then sets the button to be transparent. As a result, you have a big invisible Expand button, and it will feel like you are clicking on the preview image to open the image or PDF viewer.

This recipe can be applied either at the global or collection level, but the global level is recommended for a consistent user experience.