It Seemed Like a Good Idea
… until it was implemented.
The Problem: part of the image disappears
Can you see the subtle differences in the two screenshots?
The WordPress Kahuna theme has “Feature Boxes” under the banner. The boxes pick up posts and the images are the Featured Image from each post. But they do the weirdest thing. When you look at the page, all the images are cut off about 20 pixels at the edges. Then when you put the mouse over the image, it eases into the whole image.
Somehow this seemed like a good idea why?
User Feedback is important
In general, it’s important to give the viewer visual clues to functionality on your website. If links change color or react to a mouseover, it let’s the viewer know that it is indeed a link. This is called user feedback. There have been a few times where I’ve sent a website graphic design back to the graphic artist because they didn’t design for user feedback.
So, the Kahuna graphic artists though of this great way to provide user feedback … make the image ease out when the viewer mouses over them.
user feedback should be an aid, not a distraction
Using graphics to provide user feedback should enable a viewer to proceed with certainty, not stop their progress. This particular effect is more of a distraction than an aid.
User Feedback Should Not Result in Significant Extra Work
Because this attempt at user feedback cuts off the outer parts of an image, the images need to be reworked. For example, in the first image shown on this page, the margin given to the text is cut off. So, the image needs to have extra margin to compensate.
That means that not only is the feedback a one-time coding task, it is now a never-ending graphics task, as well.
Undoing the “Good Idea”
Besides rebuilding all those images, the problem can be corrected in the code. One fix for all the images going forward. So, I created a child theme, and wrote CSS code to override the Kahuna parent code for another site using the Kahuna theme.
.lp-boxes.lp-boxes-static .lp-box,
.lp-boxes-static .lp-box-image > img,
.lp-boxes-static .lp-box-image .box-overlay,
.lp-boxes-static .lp-box-image::after
{
transition: none;
transform: none;
} /* 8/26/18 Nora added to remove the nasty transition
8/27/18 Nora added transform
*/