鼠标悬停在图像上时显示放大图片时平滑过渡

Question

我是 HTML、CSS 的新人。我想对我网站中的图像产生悬停效果。代码有点工作。但是，当它缓和时，它不像放大时那样平滑。我希望两种方式都能顺利过渡。我在这里提交我的 css 和 html 代码。这里很有可能错误地或低效地使用了很多东西。如果有人能帮我解决这个问题就太好了。

CSS

.about .block h2 {
padding-top: 35px;
padding-bottom: 20px;
margin: 0;
}

.about .block h4 {
font-size: 20px;
text-align: justify;
}

/*----------------------*/
.about .block img {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 50%;
}

.about .about-img {
overflow: hidden;
}

.about .about-img:hover img {
-webkit-transform: scale3D(1.1, 1.1, 1);
transform: scale3D(1.1, 1.1, 1);
}

.about .about-img img {
opacity: 1;
transition: all 0.2s ease-in-out;
}

.effect {
border: none;
margin: 0 auto;
}

.effect:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

HTML

    <section class="about">
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-sm-12">
                 <div class="block">
                    <div class="section-title">
                        <h2>ABOUT X</h2>
                    </div>
                    <h4> Here I will write some text next to the circular image. I want enlarged picture when mouse hover over on the image.
                   </h4>
                </div>
              </div>
            </div>
            <!-- .col-md-7 close -->
            <div class="col-md-5 col-sm-12">
                <div class="block">
                    <img class="effect" src="image.jpg" alt="Img">
                </div>
            </div>
            <!-- .col-md-5 close -->
        </div>
    </div>
</section>

Answer 1

我觉得你的问题出在.effectclass

您应该在 .effect class

中包含转换属性

.effect {
  border: none;
  margin: 0 auto;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

离开悬停状态时应该进行转换。

鼠标悬停在图像上时显示放大图片时平滑过渡

Smooth transition when show enlarged picture in mouse hover over an image

html

css

web-deployment