I looked diligently for a solution to this on the forum but couldn’t find anything. I hope I didn’t miss it somewhere!
I’m working on a 3 column stacked layout of image and i want transitions when the images are hovered. I’ll be integrating it with a CMS (probably WordPress) and want to allow the client to upload their own images as they desire and put in their own text.
On the left column of images, because the div is set to 100% height, you’ll notice that the hover effect takes up the entire column, as opposed to just the portion of the column occupied by the image.
I originally had separate rows of 3 columns containing only 3 images, but I was trying to anticipate that the client will likely upload images of differing heights and I didn’t want there to be any blank spaces between rows.
The far right column is just another hover method I was working on. I didn’t complete it however.
It’s entirely possible that this is not the best solution for me to use so I’m completely open to all suggestions and critiques.
Your structure is a bit complicated and you rely on :hover states for you hovers when you should use interactions on hover instead. The procedure would be: put a div, put an image in and another div on top of the image with the tinted background and the text in. Make this element display none and make it appear when you hover the container div, with interactions.
Having your image as a background or as an image is a choice you have to make, espacially if you’re building a template for a CMS and even more if the image has to be changed at a moment.
Background images are declared in the CSS.
Images are declared in the HTML.
So check with your dev what’s the best solution for you.
In any case, the interaction can be made. Here is the procedure:
In your column (don’t style the column in Webflow, never) put a div and call it column div. Give it the property position:relative
In this column div put a div, call it image and put your image in it. Everything should take the dimension of the image.
In the column div, put then your hover div and give him the dimensions of the image. Give it the property position:absolute and click the corner top left. Now your hover div must overlapp the image exactly.
Now give the hover div the property opacity:0% and display:none.
Now you have to set your interaction on the column div, saying on hover trigger, it affect different element, type ‘hover’ to select the hover div, check the ‘limit to child element’ thing (unless it’s going to affect all hover divs on the page), say on hover display block + opacity 100% and the inverse on Hover out.
If you don’t do that, the position:absolute property of the hover element is not going to work. The rule is “an absolute positioned element is positoned depending of its closest positioned parent”. So we give the position:relative to the column div, it makes no visual change but give the position reference for all child positionned elements. If you understand this rule, you’ll never again have position issues, so make sure you master it. Write it on your mug with a sharpie (:
Ah, the infamous Webflow column padding… I’ve never needed to remove their padding. I read here that this was bugging some, but design-wise I have no opinion on it. I tend to use divs and display:inline-block more and the columns widget less.
What’s funny is that Webflow made me learn the pieces of CSS I didn’t know really… like inline block, where I was struggling with floats (die in hell, float!), and other stuff. By sticking with real CSS properties and vocabulary, WF makes you learn CSS for real.
haha yes! Thank you for your help man! That padding messed w/ my head for a while. I tried the inline-block at first but ran into a hiccup if the images were different widths. I couldn’t quickly sort that out so i went with the column layout. You’re exactly right about the CSS. I actually have learned a lot from WF about CSS haha