CODEWITHSUNDEEP
csshtml
delek tashi
delek tashi

Reputation: 113

How to create hover around Png image itself in css

I want to create a hover around png image itself, but i get hover around the entire grid. Ana help would be highly appreciated. i just want that shade around the android png image only. 

.button1 {
    border: none;
    background-repeat: no-repeat;
    background-size:100%;
    width: 100%;
    height: 100%;
    text-decoration: none;
    
    font-size: 16px;
    
    cursor: pointer;
    outline: none;
}


.button3:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
<!DOCTYPE html>
<html>


<body>
    <div class="grid">
           
 <button id="btnMakeCall" class ="button1 button3">
<img src="http://pngimg.com/uploads/android_logo/android_logo_PNG34.png" style="width:80%; height:auto;" />

 </button>

   </div>
</body>

</html>

Upvotes: 3

Views: 553

Answers (1)

Peter
Peter

Reputation: 624

You will not be able to achieve this through the use of a standard PNG file. The Android logo may have a transparent background but it still has dimensions that make it a quadrilateral in shape (This is why your image - on hover - shows the dropshadow behind your button). You can get the desired result by doing what @Pete recommended or creating an image sprite.

Example

Upvotes: 1

Related Questions