Создание анимации на элементе [закрыт]

.product_list_item { 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    -webkit-box-shadow: 1px 1px 2px #e6e6e6; 
    -moz-box-shadow: 1px 1px 2px #e6e6e6; 
    box-shadow: 1px 1px 2px #e6e6e6; 
    cursor: default; 
    background: #fff; 
    -webkit-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    transition: all 0.6s; 
} 
 
.product_list_item .mask, .product_list_item .content { 
    width: 100%; 
    height: 235px; 
    line-height: 235px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
} 
.overlay { 
    text-decoration:none; 
    color:#fff; 
} 
.product_list_item .product_list_item_img { 
    display: block; 
    position: relative; 
    height: 235px; 
} 
 
.product_list_item a.info { 
    display: inline-block; 
    height: 40px; 
    line-height: 40px; 
    padding: 0px 30px; 
    background: transparent; 
    border: 1px solid #000; 
    color: #fff; 
    text-decoration: none; 
    font-size: 15px; 
    text-transform: uppercase; 
    text-align: center; 
    z-index: 35; 
    border-radius: 40px; 
    margin-right: 10px; 
    cursor: pointer; 
    text-transform: uppercase; 
} 
 
.product_list_item a.info: hover { 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
} 
 
.product_list_item .product_list_item_img { 
    -webkit-transform: scaleY(1); 
    -moz-transform: scaleY(1); 
    -o-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    transform: scaleY(1); 
    -webkit-transition: all 0.7s ease-in-out; 
    -moz-transition: all 0.7s ease-in-out; 
    -o-transition: all 0.7s ease-in-out; 
    -ms-transition: all 0.7s ease-in-out; 
    transition: all 0.7s ease-in-out; 
} 
 
.product_list_item .mask { 
    background-color: #96b94b; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
 
.product_list_item .mask .product_list_item_title { 
    border-bottom: 1px solid #000; 
    background: transparent; 
    margin: 0px 40px 15px 40px; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
    color: #000; 
    font-size:25px; 
    font-weight:bold; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
 
.product_list_item .mask .product_list_item_descr { 
    font-size: 18px; 
    line-height: 22px; 
    max-width: 420px; 
    margin: 20px auto; 
    position: relative; 
    bottom: 100px; 
    color: #000; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 
 
.product_list_item a.info { 
 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 
 
.product_list_item:hover .product_list_item_img { 
    -webkit-transform: scale(10); 
    -moz-transform: scale(10); 
    -o-transform: scale(10); 
    -ms-transform: scale(10); 
    transform: scale(10); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
 
.product_list_item:hover .mask { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
 
.product_list_item:hover .mask .product_list_item_title, 
.product_list_item:hover .mask .product_list_item_descr, .product_list_item:hover a.info { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
}

<div class="product_list_item"> 
  <div class="product_list_item_img" style="background:url('https://wallscloud.net/uploads/cache/2168525702/brie_larson_as_captain_marvel-1024x576-MM-90.jpg')  no-repeat 0% 0%; background-size:cover;"> 
    <a href="#" class="overlay"> 
      <div class="product_list_item_caption"> 
          <div class="product_list_item_background"> 
              <div class="product_list_item_title">BLA BLA BLA BLAAAAA</div> 
              <div class="product_list_item_descr">Bla bla bla bla bla</div> 
          </div> 
      </div> 
    </a> 
  </div> 
  <div class="mask" style="background:url('https://images6.alphacoders.com/477/thumb-1920-477856.jpg') repeat 0% 0%,url('https://cdn.pixabay.com/photo/2018/09/09/13/32/fantasy-3664586_960_720.jpg') no-repeat 0% 0%; 
background-position: center; background-size:cover;"> 
        <div class="inner"> 
            <div class="product_list_item_title">BLA BLA BLA BLA</div> 
            <div class="product_list_item_descr">BLA BLA BLA BLAAAAA</div> 
        </div> 
    </div> 
</div>