How to make the animation smoother appearance of the unit?

<div class="product-item">
 <div class="product-img">
 <img src="./img/product.png" alt="">
 <div class="feature">
 <a href="#"><i class="fa fas-info"></i>Details</a>
</div>
</div>
 </div>

.product-item
 background: #fff
 display: inline-block
 margin: 0
 margin-bottom: 10px
 padding: 13px
 border-radius: 10px
 text-align: left
 position: relative
 overflow: hidden
.product-img
 position: relative
 display: flex
 justify-content: center
 padding: 10px 0px
 margin: 0
 overflow: hidden
img
 width: 150px
 display: block
 position: relative
.feature
 position: absolute
 top: 0
 left: 0
 color: #ed4e6e
i
 padding: 14px
 color: black
 border-radius: 50%
 border: 1px solid #f1f1f1
 line-height: 0.5
&:hover
 background: #1ecacd
a
 text-align: center
 display: inline-block
 color: #000
img
 z-index: 2
 transition: transform 0.4 s
.feature
 top: 30%
 left: 33%
 bottom: 0
 z-index: 1
 .product-img:hover img
 transform: translateX(-120px)

5e4990ff0d507301972072.png
when you hover the image moves to the left side
5e49912eaf602480223202.png
how to do so would have the block feature smoothly there?
April 7th 20 at 15:22
3 answers
April 7th 20 at 15:24
To register for feature {

display: none
transition
}

Then
hover{
display: block}
That's fine, only display is not animated. The item cannot be already a little old and already a little block. - amelie_Hickle59 commented on April 7th 20 at 15:27
April 7th 20 at 15:26
opacity, margin, left, in the combination of position: relative

.object {
 position: absolute;
 left: -100px;
 transition: all 2s ease-in-out;
 -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
 -moz-transition: all 2s ease-in-out; /** Firefox **/
 -o-transition: all 2s ease-in-out; /** Opera **/
}
.object.active {
 left: 0;
}
April 7th 20 at 15:28

Find more questions by tags CSSHTMLJavaScript