Hub Hack: Create a Hover Effect on Linked Images

Follow

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


 

Details

  • 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.

 

Setup

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.

    Hubs___Edit_Article_-_Uberflip.png
  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:

    Create_a_Cool_Hover_Effect_on_Images.png
  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.

 

Code

<style>
.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);
}
</style>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.