Skip to main content
OCLC Support

Home page image collection cards with hover effect

The default collection cards on home page are elongated, plain cards with tiny thumbnails and mostly texts. This recipe will let you have image-based cards with interesting animated hover effect.

 

Animated-hover-effect.png

 

Step 1: Upload CSS and JS files

To apply the new collection card recipe, you should download the CSS and JavaScript files from the demo site download portal (linked above) and upload them into the "Custom CSS" and "Custom Scripts" sections of the Website Configuration Tool > Global Settings > Custom, respectively.

Step 2: Upload custom images

Since the image used in the recipe is much bigger than the default collection thumbnail, you will need to upload a custom thumbnail for each of your collections through the Website Configuration Tool > Collection-level Settings > (pick YourCollection from the dropdown menu) > Page Types > Landing Pages > Image preferences for this collection on the home page > Upload a custom image.

The default size of these image cards is 300px by 300px. So as a general rule, you will want to upload an image that is at least 300px by 300px. A smaller image will be stretched, and a non-square image will be trimmed.

Step 3 (optional): Adjust collection summary

The collection summary will be displayed in a different font. So you might need to adjust it by going to: Website Configuration Tool > Collection-level Settings > (pick YourCollection from the dropdown menu) > Page Types > Landing Pages > Collection Summary on Home Page.

Step 4 (optional): Modify styling

You can easily adjust the size of the image cards by changing the 300px to other numbers in the .css file:

.cdm-animated-card {

… …
width: 300px;
height: 300px;

… …

You can also un-comment the following to have some interesting border style for the cards:

/*Optional: add border */

    /*border: 5px solid #006FA7;
    border-radius: 25px;*/

 

You can modify the collection title text by editing the styles for .cardTitle, the collection summary text by editing .cardDescriptionText, and the double-chevron (>>) button by editing .cdm-animated-card in the CSS file.

Disclaimer: this recipe affects certain accessibility functions of the home page. Make sure it satisfies your institution’s accessibility requirements before releasing it.

 

  • Was this article helpful?