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>

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

when you hover the image moves to the left side
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

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 **/
} {
 left: 0;
April 7th 20 at 15:28

Find more questions by tags CSSHTMLJavaScript