Streaming live at 10am (PST)

Sizing Images, style always in middle, arrow in div

Hello, I’m trying to resize an image with transitions, But I could not find transition setting for resizing background image in a time any help with that ?
This is my website in read only mode:
I’m trying to make this item:
to be like this:
in 800ms but it does not work.

Also I’m trying to make to make something always in the middle of the website in all screens, But I cloud not find anything to make it like that i tried Relative but there’s no settings to make it in middle so is there any way to make it like that in margin maybe or something ?

The last thing, I’m trying to make an small arrow in a box like this : can any one tell me if that’s exist in webflow if yes please tell me the method how to do it.
Thanks for help :smile:

@cyberdave Please answer me :frowning:

Hello @Ibrahem, let me try to answer your questions.

  1. Unfortunately there is no such transition for background image in Webflow, BUT you can recreate such effect
  • instead of using background, put image inside the div.
  • make div overflow = hidden and create interaction for this div with HOVER trigger.
  • in that interaction enable “Affect different element” and choose image class
  • make is scale on hover and back
  1. For horizontal aligning (centering) you can use option in display settings (right next to margin/padding block).
    For vertical alignment (centering) you can use positioning.

-for centering object inside another object:
– position=relative (or absolute if parent object has relative position or there is another siblings), top=50%, + transform (in effects section) = move up 50%

-for centering object relatively to the screen (always will be in the middle) just do all the same but position = fixed.

  1. For add arrow to some box you will have to use image-triangle or “css styled” div right under the box

How create triangle with CSS by using borders you can find here

Hope it helps,


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.