How to hide overlay on mouse hover

Question

Here is my code, what i want is to hide overlay after mouse hover, and what is happening is its staying active until i remove mouse hover on the image. is there any one can solve this problem

 .upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; overflow: hidden; background: #ddd; opacity: 0.5; transition: .2s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%;} .maine {position: relative; overflow: hidden;} .upper:after {width 0; height: 0;} 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> heading </div> </div> </div> 

Answer 1

Here is the solution that you want and made without using @keyframes .

 .maine {position: relative; overflow: hidden;} .upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; overflow: hidden; background: #ddd; transition-property: width, height; opacity: 0.5; transition: .4s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%; opacity: 0; } 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> heading </div> </div> </div> 

If you want to keep heading visible it should be a solution..!

 .maine {position: relative; overflow: hidden;} .upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; overflow: hidden; background: #ddd; transition-property: width, height; opacity: 0.5; transition: .4s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%; opacity: 0; } .heading {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding-top: 30%; text-align: center; display: none; transition: all .2s linear !important;} .maine:hover .heading {display: block;} 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"></div> <di class="heading"><h2>Heading</div> </div> </div> 

Answer 2

Either use keyframe or this solution:

.maine:hover .upper:active,
.maine:hover .upper:focus,
.maine:hover .upper:hover {
  opacity: 0;
}

Answer 3

I think the easiest solution will be switch to an animation .

 .upper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .upper-background { position: absolute; width: 0%; height: 0%; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; border-radius: 100%; background-color: rgba(251, 251, 251, 0.5); } .upper-inner { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; opacity: 0; } .maine:hover .upper-background { animation: expand 0.6s ease; animation-fill-mode: forwards; animation-iteration-count: 1; } .maine:hover .upper-inner { animation: showText 0.3s ease; animation-fill-mode: forwards; animation-iteration-count: 1; } .maine { position: relative; display: inline-block; overflow: hidden; } @keyframes showText { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } @keyframes expand { 0% { width: 0%; height: 0%; } 95% { width: 150%; height: 150%; } 100% { width: 150%; height: 150%; opacity: 0; } } 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> <div class="upper-background"></div> <div class="upper-inner">NAME</div> </div> </div> </div> 

Answer 4

If you want to remove overlay, remove transform property from .upper class

 .upper {position: absolute; top: 50%; bottom: 0; left: 50%; width: 0; height: 0; overflow: hidden; background: #ddd; opacity: 0.5; transition: .2s ease; border-radius: 100%;} .maine:hover .upper {width: 150%; height: 150%;} .maine {position: relative; overflow: hidden;} .upper:after {width 0; height: 0;} 

 <div class="col-md-2"> <div class="maine"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive"> <div class="upper"> heading </div> </div> </div>