Hub Hack: Create a Hover Effect on Linked Images


Use this Custom Code snippet to create an effect when a user hovers their mouse over an image in an Item.


Hub Hacks are not official Uberflip features.

Hub Hacks may not work on all Hubs, or may cause unexpected behavior. If you experience issues with a Hub Hack, available support is limited to helping you disable the Hub Hack only.


Hub Hacks are not compatible with Front End V2 Hubs.

If you are not sure if your Hub uses Front End V2, see this article for help.


  • Type: CSS
  • Placement: Head
  • Notes: The hover effect is often used as a subtle way of indicating to users that clicking on an image does something, like linking to another article or site. You'll need at least a basic understanding of CSS to do this.



In addition to adding some Custom Code to your Hub, you'll also have to do the following for each Item on which you want the hover effect to work:

  1. Log in to Uberflip and navigate to an Item on your Hub on which you want to enable the hover effect. This should be an item that contains an image with a link, or to which you want to add an image with a link.
  2. Click on Edit Item.
  3. In the Edit Article view, go to the Editor tab and click on the <>Source button in the menu bar.

  4. This will open the HTML view of the post. Locate the image, and wrap it within <a> tags to link it (e.g. <a href=[link url] >[image]</a>).
  5. Then, wrap the linked image in a <div> or <figure> element.
  6. Lastly, put a class on that <div> or <figure> element and name it "rollover" (e.g. <figure class="rollover">[linked image]</figure>)
  7. Here's an example of what this might look like:

  8. Repeat the above steps for each linked image/Item on which you want to enable the hover effect.
  9. Add the code snippet below to your Hub's Custom Code.



.rollover {
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;

.rollover:hover {
background: #343434;

.rollover:hover img {
opacity: 0.7;

a:hover {
color: #313131;
text-decoration: none;

.rollover img {
-webkit-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translateZ(0);
transform: translateZ(0);
0 out of 0 found this helpful



Please sign in to leave a comment.