CSS转换无法正常工作（调整图像大小）

I have a problem creating a transition in CSS3. I have a div block, that has an image shaped in circle with CSS, and underneath some text. I have managed to do that whenever I hover a block, circle and image resize, but I cannot manage to do what I want. I want to do it the way that only circle scales but image stays the same size. Can you please help me. I would be very grateful.

我在CSS3中创建转换时遇到问题。我有一个div块,它有一个用CSS形成圆圈的图像,在一些文本下面。每当我悬停一个块,圆圈和图像调整大小时,我就设法做到了这一点,但我无法做到我想做的事情。我想这样做的方式只有圆形比例,但图像保持相同的大小。你能帮我么。我会很感激。

My HTML code

我的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 is used instead of section

使用Vsebina而不是部分

storitve is a block

storitve是一个块

okrogel is a round div block that has image in it

okrogel是一个圆形div块,里面有图像

And my CSS code looks like (I have used grey background for now just to see where they are standing)

我的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;
}

1 个解决方案

#1

Add this to your css.

将此添加到您的CSS。

The hover is forcing the image to transform.

悬停正在强制图像转换。

So force it to transform again to the original resolution using this:

因此,使用以下命令强制它再次转换为原始分辨率:

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

You can tweak the 0.80 until you get the result you want.

你可以调整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>

#1