CSS Tip - Enlarge KB Images on Hover

Did you know Hudu allows you to add custom CSS to your instance?

An example of something you can do with strictly a little CSS is add the ability to enlarge an image when you hover. This is especially helpful on articles with a lot of complex screenshots.

Here's some examples:

Super simple:

Enlarges the image to a set size so they're always the same width (you can also change the width to a percentage) and sets the border to black with 50% opacity.

.hemingway__split-content img:hover {
 width: 1000px;
 border: 5px solid rgba(0, 0, 0, .5);
}

A little fancier:

Enlarges the image with a smooth transition 50% to the right at 1.5x larger than the original with a black border at 50% opacity. See CSS Transform for more options.

.hemingway__split-content img:hover {
  transition: transform .5s;
  transform: translate(50%, 0%) scale(1.5);
 border: 5px solid rgba(0, 0, 0, .5);
}

Note: Depending on what you have in custom CSS already (if anything), you may have to put this snippet toward the top.

Using ".hemingway__split-content img:hover" will apply to images across all KBs