在div和图像上的悬停效果在CSS中不起作用

Question

i have a div that contain image [and the image is serve the purpose of button]. I want to make the div or img more user freindly . For that i try to create a border when hover on the it . But its not working . Please see my code

 .pa-img, .img-div{ cursor:pointer; } .img-div:hover { border:1px solid red; } .pa-img:hover { border:1px solid red; } 

 <div class="img-div"> <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" /> </div> 

If you have any good idea to make this imge more attractive or more effect on hover please help . I will create a jquery function for the mage click .

But currently user is not able to identify this is a button . They are not clicking the image . That why i try to make hover effect

Answer 1

Use this, the 1px padding is just so the image does not jump around when you add the border.

.pa-img{
    padding: 1px;
}
.pa-img:hover{
    padding: 0;
    border:1px solid red;
}

Answer 2

I used :hover removed the ::hover placed a transparent border so it wouldn't jump and used a transition so it would move smoothly in and out of hover.

 .pa-img, .img-div{ cursor:pointer; border:1px transparent solid; } .img-div:hover{ border:1px solid red; transition:ease-in-out.3s; } .pa-img:hover{ border:1px solid red; transition:ease-in-out.3s; } 

 <div class="img-div"> <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" /> </div> 

Answer 3

You can simply add a transparent border to remove the jumping. With a simple transitions it's less in your face.

 .pa-img, .img-div{ cursor:pointer; border: 1px solid transparent; transition: border .2s ease-in-out; } .img-div:hover { border:1px solid red; } .pa-img:hover { border:1px solid red; } 

 <div class="img-div"> <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" /> </div> 

Answer 4

If you want to make it more user-friendly and more aesthetically beautiful, make sure you also get to know a few about Design, and not only coding.

Here's a way of making it more aesthetically beautiful :

 .img-div { width: 234px; padding: 10px; } .pa-img, .img-div{ cursor:pointer; border:1px transparent solid; } .img-div:hover{ transition:ease-in-out 0.2s; box-shadow: inset 0px 0px 15px; } .pa-img:hover{ transition:ease-in-out 0.2s; } 

 <div class="img-div"> <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" /> </div> 

---

ALSO - You can even add rounded borders to make it fit a bit more aesthetically with the PayPal button :

 .img-div { width: 234px; padding: 10px; border-radius: 25px; } .pa-img, .img-div{ cursor:pointer; border:1px transparent solid; } .img-div:hover{ transition:ease-in-out 0.2s; box-shadow: inset 0px 0px 15px; } .pa-img:hover{ transition:ease-in-out 0.2s; } 

 <div class="img-div"> <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" /> </div> 

IF you want the image also to position a bit to the side and down to work even more like a button, you could do this :

 .img-div { width: 234px; padding: 10px; float: left; } .pa-img, .img-div{ cursor:pointer; border:1px transparent solid; } .img-div:hover{ transition:ease-in-out 0.2s; box-shadow: inset 0px 0px 15px; } .pa-img:hover{ transition:ease-in-out 0.2s; margin-left: 2px; margin-top: 2px; } 

 <div class="img-div"> <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" /> </div> 

To make the rounded borders, just add border-radius: 25px; (or any value that you prefer) on the .img-div

I hope it fits your needs.