Блог

Я новичок в 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>
  

Я думаю, что ваша проблема заключается в .effect классе

Вы должны включить свойство transition в свой .effect класс

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

Это должно выполнять переход при выходе из состояния наведения.