1

I have this div with a background image, and I want to scale it on hover, but I don't want to scale the children of the div. I've tried many things but I haven't found a solution.. Does anybody know how to do this?

I want to scale .bgi on hover

div.header
{
    grid-area: header;
    overflow: hidden;
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;    
}
div.bgi
{  
    background-image: url(images/office.jpg);    
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
        <div class="header bgi tint">
            <div class="logo">
                <img src="assets/images/logo.png" />
            </div>
            <a class="Links" id="link" href="/someurl.html"
                name
            </a>

        </div>
Truls
  • 55
  • 2
  • 5
  • 1
    Possible duplicate of [how do I zoom a background image on a div with background-size](https://stackoverflow.com/questions/21300673/how-do-i-zoom-a-background-image-on-a-div-with-background-size) – lumio Nov 09 '18 at 15:03
  • please try to provide a full working code and specs. – johnny04501 Nov 09 '18 at 15:06
  • This should be pretty simple. But not in this contruct. First create div directly after header and set it ```position: absolute``` and set the position accordingly. The ```header``` div should be ```position: relative.``` Then on hover you just use e.g. ```transform: scale(2)``` to scale the ```bgi div```. Ah btw, you should ```overflow:hidden``` the header div to cut the scaling background edges. Try this on yourself I hope you got an hint behind the Idea what I am talking about. If needen I can provide you with an example later on. – Gkiokan Nov 09 '18 at 15:08
  • 1
    instead of cover for background size - you could use a percentage that would cover the the element in question and then on hover, increase that percentage – Pete Nov 09 '18 at 15:10

0 Answers0