As great as the summary block feature is, the built in design can be pretty... well, boring!

In this tutorial we’ll use some custom code to change the look of summary blocks so they stand out on a hover.

The codes from this video are listed below, and yes, they will work in both version 7 & version 7.1!

Be sure to adjust things like colors and any other values so it looks amazing for your own site design.

Here are the codes from this tutorial:

Grayscale:

.summary-item:hover .summary-thumbnail{filter:grayscale(1)}

Border:

.summary-item:hover .{border: 1px solid pink}

Bold font:

.summary-item:hover * {font-weight:bold}

Shadow:

.summary-item:hover {box-shadow:5px 5px 15px #ddd}

Darker shadow:

.summary-item {box-shadow:5px 5px 15px #ddd} .summary-item:hover {box-shadow:5px 5px 15px #aaa}