CSS Image在固定容器中缩小

时间:2018-05-08 13:24:45

标签: html css hover mousehover

首先,我使用wordpress创建自己的个人HTML和CSS网站。我已经为我的HTML代码添加了一个具有指定大小的空容器。这个容器类的名称是LiveChat。

这是HTML:

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

我现在要做的是添加背景图像,“缩放”35%。此外,我想在这个图像周围有一个15px白色边框的白色边框。因此我创建了这段代码:

.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);
    }

首先,我的元素周围没有白色边框。第二个问题是,元素右侧有一个白条......

现在我想添加一个悬停效果。当有人将鼠标悬停在背景图像上时,缩放应该达到100%。可悲的是,使用它时没有任何反应:

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

因为我现在整天都在努力,所以我希望你们有一些经验丰富的建议。非常感谢!

.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>

4 个答案:

答案 0 :(得分:1)

您的边框没有显示的原因是您还没有定义边框样式: 将border-style: solid添加到CSS将解决这个问题。

图像不是&#34;缩放&#34;因为您还没有将:hover添加到css中。

我已将width: 100%添加到图片中,以确保它填充div容器。

试试这段代码:

&#13;
&#13;
.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);
}
&#13;
<div class="LiveChat">     
	<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>
&#13;
&#13;
&#13;

值得注意的是,您可以通过将样式分组来进一步清理您的CSS:

.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;
}

修改

我以前忘了提这个。 .LiveChat背景图片中的网址有拼写错误。你需要添加&#39; b&#39;到了&#39; baway.de&#39;。我已经更新了我的答案以反映这一点。

答案 1 :(得分:0)

尝试以下代码

.LiveChat {
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 452px;
    height: 452px;
    overflow: hidden;
   border:15px solid #ddd;
    overflow: hidden;

}
.LiveChat img {
    -webkit-transform: scale(1.35);
    transform: scale(1.35);
       transition: all 2s ease-in 0s;
  -webkit-transition:  all 2s ease-in 0s;
  -ms-transition:  all 2s ease-in 0s;
  cursor: pointer;

}
.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>

答案 2 :(得分:0)

而不是使用border-color: white;border-width: 15px;使用border: 15px solid white。我使用了黑色,因此它可以用于演示目的。

缩放效果很好。

.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: 15px solid black;
        }
        .LiveChat img {
            -webkit-transform: scale(1.35);
            transform: scale(1.35);
        }
        .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>

答案 3 :(得分:0)

感谢你们两位。通常情况下,悬停代码应该是字,而不是。我现在会问Avada支持,因为它的主题一定是问题......