Streaming live at 10am (PST)

Sizing Images, style always in middle, arrow in div


#1

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


#2

@cyberdave Please answer me frowning


#3

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

2) 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.

3) 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 https://css-tricks.com/snippets/css/css-triangle

Hope it helps,
Anna


#4

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