how to change image in hover effect if i am hover the image?

Question

please help to find this solution.. How to change background image if i am hover the Image..

Priyanka Jain · Answer

You can use simple css to change you image on hover Refer below example "en" > Hover on Image "text/css" > .card { width: 150px; height: 200px; background: url( "card-back.jpg" ) no-repeat; margin: 50px; } .card:hover { background: url( "card-front.jpg" ) no-repeat; } class = "card" >

Bidyasagar Mishra · Answer

use the following simple code to change background image when u hover the Image. html > head > style > style > script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > script > script > $(document).ready(function(){ $(".image").hover(function(){ $(this).attr('src','https://jpeg.org/images/jpeg-home.jpg'); }, function(){ $(this).attr('src','https://jpeg.org/images/jpegsystems-home.jpg'); }); }); script > head > body > img class = "image" src = "https://jpeg.org/images/jpegsystems-home.jpg" > img > body > html >

Vikas Jha · Answer

Apart from these expert advice you can achieve it in other simple way is to use .png image file instead of .jpg and in css class for the card just add below code snippet .card:hover{ */add required background color/* }

Gajendra Jangid · Answer

"en" > Change Image on Hover in CSS "text/css" > .card { width: 130px; height: 195px; background: url( "/examples/images/card-back.jpg" ) no-repeat; margin: 50px; } .card:hover { background: url( "/examples/images/card-front.jpg" ) no-repeat; } class = "card" >

Sivakumar Koneti · Answer

Hello dear read once this link https://www.w3schools.com/howto/howto_css_image_overlay.asp

how to change image in hover effect if i am hover the image?

Answers (5)