Hover gradient and background image with smooth in and out transition - html

Question

Hover gradient and background image with smooth in and out transition
so I am making a website. background-color: #212121; that has come to have a hover gradient with the background image with smooth in and out transition.
now, the transition is not smooth. It is flashing.
But one thing without changing the position and size of the .amsecta. can you help me?
<section class="m-containera">
<div class="am-secta">
<div class="contenta">
<div class="titls">Stream your favourite <br class="inlin md:hidden"> tracks right now</div>
<div class="par"> <i class="fab fa-spotify"> </i>Spotify Playlist</div>
</div>
<div class="iframe-container">
<iframe src="https://open.spotify.com/embed/artist/6ffL1W3QlzZGnP90Ffi3kY?theme=0" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</section>
body{
background-color: 212121;
}
.iframe-container {
padding-top: 29.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 360px;
left: 15%;
position: absolute;
top: 0px;
width: 70%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.iframe-container iframe:hover {
box-shadow: 0 5px 20px rgb(0 0 0 / 160%);
}
.m-containera {
width: 100%;
max-width: 1517px;
margin: 0 auto;
align-content: center;
text-align: center;
}
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
.contenta {
padding: 0 10px;
}
.titls {
font-size: 34px;
font-weight: 700;
text-align: center;
color: white;
font-family: 'Raleway';
}
.par { color: white;
text-align: center;
font-weight: normal;
font-size: 20px;
line-height: 1.5;
padding-top: 10px;
padding-bottom: 45px;
font-family: 'Raleway';
}
.inlin {
display: none;
}
.bold {
font-weight: 700;
}

Answer 1

Maybe, you are looking for this:
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}