# Zoom-In Hover on Div Background Image

**URL:** <https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092>\
**Category:** How To\
**Created:** [September 10, 2024, 2:11pm UTC](https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092 "2024-09-10T14:11:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex\_k](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/alex_k/32/21650_2.png) [@alex\_k](https://forum.bricksbuilder.io/u/alex_k)\
**Post date:** [September 10, 2024, 2:11pm UTC](https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092/1 "2024-09-10T14:11:20Z")

</div>

Hi there!

I am struggeling with my zoom-in hover effect on my section: [https://cookscorner.alexanderkoch.at/#brxe-dbmous](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

---

<div class="post-metadata">

**Author:** ![sinanisler](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sinanisler/32/34468_2.png) [@sinanisler](https://forum.bricksbuilder.io/u/sinanisler)\
**Post date:** [September 10, 2024, 6:55pm UTC](https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092/2 "2024-09-10T18:55:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ddcbf](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/ddcbf/32/12316_2.png) [@ddcbf](https://forum.bricksbuilder.io/u/ddcbf)\
**Post date:** [April 11, 2025, 6:57pm UTC](https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092/3 "2025-04-11T18:57:57Z")

</div>

My background size is “cover” (which I want) – how can I make it grow relative to that?

---

<div class="post-metadata">

**Author:** ![sinanisler](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sinanisler/32/34468_2.png) [@sinanisler](https://forum.bricksbuilder.io/u/sinanisler)\
**Post date:** [April 11, 2025, 7:57pm UTC](https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092/4 "2025-04-11T19:57:29Z")

</div>

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.

🙂

```auto
{"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":[]}

```

---

<div class="post-metadata">

**Author:** ![alex\_k](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/alex_k/32/21650_2.png) [@alex\_k](https://forum.bricksbuilder.io/u/alex_k)\
**Post date:** [April 13, 2025, 5:35pm UTC](https://forum.bricksbuilder.io/t/zoom-in-hover-on-div-background-image/26092/5 "2025-04-13T17:35:00Z")

</div>

Hi @sinanisler, thanks for your help - its working.