CSS Image shrink in a fixed container

Question

First of all, I am using wordpress to create my own website with personal HTML and CSS. I have added an empty container with a specified size to my HTML code. The name of this container-class is LiveChat.

This is the HTML:

<div class="LiveChat">     
    <img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>

What I am now trying to do is to add a background image, which is "zoomed" by 35%. Additionally I want a white border around this image with a 15px white border. Therefore I created this code:

.LiveChat {
        background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
        background-repeat: no-repeat;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        overflow: hidden;
        border-color: white;
        border-width: 15px;
    }
    .LiveChat img {
        -webkit-transform: scale(1.35);
        transform: scale(1.35);
    }

First of all, there is no white border around my element. The second issue is, that there is a white bar on the right hand side of the element...

Now I want to add a hover effect. When someone hovers over the background image, the zoom should go to 100%. Sadly nothing happens when using this:

.LiveChat:hover img{
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
}

Since I am trying all day long now, I hope you guys have some experienced advise. Thanks a lot!

.LiveChat {
            background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
            background-repeat: no-repeat;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: auto;
            overflow: hidden;
            border-color: white;
            border-width: 15px;
        }
        .LiveChat img {
            -webkit-transform: scale(1.35);
            transform: scale(1.35);
        }
        .LiveChat:hover img{
        -webkit-transform: scale(2.0);
        transform: scale(2.0);
    }

<div class="LiveChat">     
    	<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
    </div>

Answer 1

The reason your border isn't showing up is because you haven't defined the border-style: Adding border-style: solid to the CSS will fix that.

The image is not "zooming" because you haven't added :hover to the css.

I've added width: 100% to the image to ensure it fills the div container.

Try this code:

.LiveChat {
    background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-style: solid;
    border-color: white;
    border-width: 15px;
}
.LiveChat img {
    -webkit-transform: scale(1.35);
    transform: scale(1.35);
    width: 100%;
}
.LiveChat img:hover {
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
}

<div class="LiveChat">     
	<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>

Its worth noting that you can clean up your css further by grouping the styles like so:

.LiveChat {
    background: url("https://baway.de/wp-content/uploads/2018/05/Bild1.jpg") no-repeat;
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 15px solid white;
}

---

EDIT

I forgot to mention this before. The url in your background image of .LiveChat has a typo. You need to add 'b' to 'baway.de'. I have updated my answer to reflect this.