Create a Cool Hover Effect on Images

November 5, 2015 Uberflip Customer Success

A hover effect on your images is a subtle way to let users know that they can click the image to be taken to another site, or another article. Here's how to create this effect.

  1. Log in and navigate to an Item that has an image with a link (or choose an Item that you'd like to edit to include an image with a link 😉).
  2. Use the '<> Source' button in the editor so you can see the HTML version of your post. If you'd like to apply this effect to images across your Hub, you'll need to be in this view so you can change the HTML of each image.
  3. Wrap the image in 'a' tags so that it is linkable.
  4. Then wrap the link and image in a div or figure element.
  5. Put a class of "rollover" on that div or figure. (You can name the class whatever you want, but all the CSS below is applied to an element with a class of "rollover", so just be sure to change that in your CSS.)

    For example, the image above is in a "figure" element. This is what it looks like in HTML:

  6. Copy the CSS below and put it in the Custom Code > CSS section for your Hub. (You can also enable Custom Code on the Item and just put this code in the CSS section there.)
.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);
}

Feel free to play around with the CSS to create the effect you want! Click here to learn more about CSS transitions and animations.

Previous Article
Integrate Olark With Your Hub
Integrate Olark With Your Hub

Next Article
Change the Background Colour on the Search Results Screen
Change the Background Colour on the Search Results Screen

How to change the transparent grey colour on search results.