Hi there!
I am struggeling with my zoom-in hover effect on my section: https://cookscorner.alexanderkoch.at/#brxe-dbmous
I just want that there is a smooth zoom-in effect on :hover combined with my dark overlay.
My: transition: background-size 0.3s ease-in-out; will be ignore
Hope for replies.
Best,
Alex
change your background size to custom make it 100% or 100px whatever depends on your setup
and then setup your hover state background-size make it 110%
done
btw you don’t need to write ease in out dom should ease in and out in default.
just give 0.3s
My background size is “cover” (which I want) – how can I make it grow relative to that?
cover a bit tricky need to write custom css …etc
that is why I would recommend custom size.
if it is not a section you should be fine with responsive as well.
{"content":[{"id":"zccqdu","name":"section","parent":0,"children":["osnhbl"],"settings":{"_margin":{"top":"100"}}},{"id":"osnhbl","name":"container","parent":"zccqdu","children":["rfhmmp"],"settings":{}},{"id":"rfhmmp","name":"block","parent":"osnhbl","children":["yunwvd"],"settings":{"_width":"400","_height":"330","_background":{"image":{"url":"https://sinanisler.com/wp-content/uploads/2025/01/image-12.png","external":true,"filename":"image-12.png"},"repeat":"no-repeat","size":"custom","custom":"480px","position":"center center"},"_cssTransition":"0.5s","_background:hover":{"size":"custom","custom":"500px"},"_justifyContent":"center","_alignItems":"center"}},{"id":"yunwvd","name":"button","parent":"rfhmmp","children":[],"settings":{"text":"I am a button","_background":{"color":{"hex":"#ffffff","id":"bfjqvk","name":"Color #20"}},"_typography":{"text-transform":"uppercase","font-weight":"800"}}}],"source":"bricksCopiedElements","sourceUrl":"https://sinanisler.com","version":"1.12.3","globalClasses":[],"globalElements":[]}
Hi @sinanisler, thanks for your help - its working.