Streaming live at 10am (PST)

How to make image larger than div/container? Overflow on both sides


#1

Please help me figure out how to size an image larger than the div/container so that it overflows on both the top and the bottom without extending the height of the div/container. The only way I know would be to apply absolute positioning, but then it makes the text content a mess and responsive design pretty frustrating. Any advice would be greatly appreciated!

In Webflow:

In Adobe Muse (the effect that I’m looking for):


#2

Hi @erictc,

They are many ways to do that, but i can see two easy one :

Do it with transform

1

Put the parent of your image in relative and your image absolute and play with width or height (110% for example).

If it’s abstract for you share me your project i ll be glad to help you with the “real project”

Thanks,
Have a nice day,


#3

Thank you @zbrah, Transform was exactly what I was looking for! Solved my issue entirely and gave me great new tools to work with. I can’t believe I completely overlooked it! Thank you again!


#4

Your welcome @erictc :slight_smile:
Have a look at this if you want to learn more about css transform


Have a great day