Hi, Webflow community.
I have a fairly common CMS collection staff page with a grid of headshots/names (with each having its own modal pop-up bio). I added a hover transition to make each headshot grow slightly to cue the user that each staff member is clickable (to activate said modal pop-up bio). I’m having two problems here:
-
Yesterday my client added four new staff members: Joseph Douglas, Erdong Li, Ruben Portillio, and Justin Shepard. You’ll see that their headshot photo proportions become compressed when cursor is hovered over photo. I’m baffled because this entire grid is a CMS Collection and all the other images behave normally, so I would have thought these new entries would conform to the existing properties of all the others. Why just these four new images???
-
There seems to be an occasional odd “hiccup” on the headshot photos: when you move the cursor away the photo briefly jumps in size before returning to it’s non-hover state. I have another page on the site using the image-grow-on-hover transition and there’s not problem, works fine. EDIT: I just checked it again and now the hiccup is gone but Problem 1 is still present.
[Note that on the staff page (link below) I’d initially tried creating the image-grow-on-hoever effect with an interaction animation before I learned in can be done (much more easily) with a transition. I thought I’d deleted all of my interaction animation but maybe there’s a lingering artifact that I missed???]
Grateful as always to anyone who can lend me your expertise!!!
EDIT / UPDATE: I fixed this by cropping the new images to a square so that the image grows proportionally.