Hover gradient and background image with smooth in and out transition

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">&nbsp;&nbsp;</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;
}

Please include all of your relevant html and css in a snippet so we can see what you have so far and help you get to your goal. — tstrand66, Jun 09 '21 at 15:17
Could you also post some **html**, so i could bring all together ? — Manifest Man, Jun 09 '21 at 15:18
On **transition**-attribute of CSS-class **.am-secta**, you should replace **ease-out** with **ease-in-out** — Manifest Man, Jun 09 '21 at 15:26
https://stackoverflow.com/questions/9483364/css3-background-image-transition check out this question on transitioning a background image — tstrand66, Jun 10 '21 at 13:37

score 0 · Answer 1 · answered Jun 09 '21 at 15:23

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;
    }

Hover gradient and background image with smooth in and out transition

1 Answers1