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:
https://preview.webflow.com/preview/naitreno?preview=07f53fb6075a3b9f91974b59e8c3f6b2
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 CSS Triangle | CSS-Tricks - CSS-Tricks

Hope it helps,
Anna

2 Likes

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