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

Question

I am new in HTML, CSS. I want to have hover effect on an image in my website. The code is kind of working. However, when it ease out it is not as smooth as when it get enlarged. I want a smooth transition in both ways. Here I submit my css and html code. There is a big chance many things are wrongly or inefficiently used here. It would be really great if someone can help me out with this.

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

I think your problem lies on .effect class

You should have include the transition property on your .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;
}

That should do the transition when leaving your hover state.