![](./assets/WnpPbgDkzW/logo-black-square-912x911.png)
Introducing Shorthand's expanded Overlay range
![](./assets/94S1dB1lGJ/overlayui_header-frame-0ms-1600x1600.jpg)
It’s our way of helping you improve reader experiences with seamless transitions between media, headlines, and copy.
![](./assets/Vn6ao6535z/benice_230x230-230x230.png)
by Ben Ice
by Ben Ice
If you’ve been waiting for ways to ease your media into — or out of, or something in between — your stories, wait no longer.
These changes could make a big difference to your storytelling.
The Gradient Overlay lets you play with blending and styling effects over media, as readers scroll through your stories. The new options mean we now offer seven Overlay styles, most of which include four presets each, along with opacity and colour choices that render the possible iterations endless.
Slide along the Opacity scale to control just how much of the images you want to blur over. The styles include top down gradients, bottom up gradients, left to right or vice versa, top and bottom gradients, and finally, a full border Vignette option. Throughout this page, we’ve demonstrated some of the possibilities.
These new controls are offered for Title and Text Over Media sections. To find them, click the Section Options icon over the section media and scroll down to Overlay.
Here, we've put the new options to work, using our Campus News template to demonstrate.
Vignette
![blue and pin abstract painting](./assets/WxjitRlfjG/revealsection_widescreen_img_2560x1440-2560x1440.jpg)
If you want to use a gradient to fully frame a particular character or image, then the Vignette option is for you. See how this central campus area and 'The year ahead' title are made the focal point by clouding everything else out.
![](./assets/7lEkeTC2HI/vignette-4096x2229.png)
Top and Bottom
![blue and pin abstract painting](./assets/28eMyM6q91/revealsection_widescreen_img_2560x1440_2-2560x1440.jpg)
As your reader scrolls through the page, you may want to make for a smooth, blended experience for images, video, or Text Over Media headings and subheadings. See a range of possible options below.
![](./assets/3zneFCqmEm/topandbottom-precomp_preseta-4096x2229.png)
![](./assets/BYhc3xVglg/topandbottom-precomp_presetb-4096x2229.png)
![](./assets/XMbxabclPN/topandbottom-precomp_presetc-4096x2229.png)
![](./assets/qJTnmeod17/topandbottom-precomp_presetd-4096x2229.png)
![](./assets/IMzN7KW9oI/revealsection_widescreen_img_2560x1440_left-2560x1440.jpg)
![](./assets/9jBv7LrQSf/revealsection_widescreen_img_2560x1440_right-2560x1440.jpg)
Left
and Right
When you want to play with balance and perhaps showcase material to the left or right of a header, you need Left or Right style. Both options are demonstrated below.
![](./assets/nFVAeSA06W/left-4096x2229.png)
![](./assets/C9vodKpjG8/right-4096x2229.png)
Bottom
![blue and pin abstract painting](./assets/vR31fDOigJ/revealsection_widescreen_img_2560x1440_4-2560x1440.jpg)
Bottom Gradient Overlay can create a smooth transition between a piece of media and a passage of text.
See how the image above gently fades beneath the 'Bottom' header text.
Like what you see? Try the new options for yourself in the free Campus News template.