html - CSS 过渡无法正常工作(调整图像大小)

Question

我在 CSS3 中创建过渡时遇到问题。我有一个 div block ，它有一个用 CSS 做成圆形的图像，下面是一些文本。每当我将鼠标悬停在 block 、圆圈和图像调整大小时，我都设法做到了这一点，但我无法做到我想做的事。我想按照只缩放圆圈但图像保持相同大小的方式来做。你能帮我么。我将不胜感激。

我的 HTML 代码

<div id="Vsebina">
    <div class="storitve"><div class="okrogel"> <img src="Slike/night.jpg"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
  </div>

使用 Vsebina 代替部分

故事是一个 block

okrogel 是一个圆形的 div block ，里面有图像

我的 CSS 代码看起来像(我现在使用灰色背景只是为了看看他们站在哪里)

.storitve {
    width:30.3%;
    margin:1.5%;
    height:400px;
    background:grey;
    float:left;
}

.okrogel img {
    max-height:100%;
    border-radius:50%;
    display:block;
    position:relative;
}

.storitve:hover .okrogel{
    transform:scale(1.25,1.25);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}

.okrogel {
    width:200px;
    height:200px;
    margin:0 auto;
    margin-top:10px;
}

Answer 1

将此添加到您的 CSS 中。

悬停迫使图像发生变化。

因此强制它再次转换为原始分辨率:

.storitve:hover .okrogel img{
    transform: scale(0.80, 0.80);  !important;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}

您可以调整 0.80，直到获得您想要的结果。

.storitve {
    width:30.3%;
    margin:1.5%;
    height:400px;
    background:grey;
    float:left;
}

.okrogel img {
    max-height: 200px;
    max-width:  200px;
    border-radius:50%;
    display:block;
    position:relative;
}

.storitve:hover .okrogel{
    transform:scale(1.25,1.25);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}
.storitve:hover .okrogel img{
    transform: scale(0.80, 0.80);  !important;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}


.okrogel {
    width:200px;
    height:200px;
    margin:0 auto;
    margin-top:10px;
    background: rgba(0,0,255, 0.7);
}

<div id="Vsebina">
    <div class="storitve"><div class="okrogel"> <img src="http://www.freeiconspng.com/uploads/firefox-logo-icon-15.png"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Internet_Explorer_9_icon.svg/2000px-Internet_Explorer_9_icon.svg.png"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png"></div></div>
  </div>