Mouse hover to zoom image & Button

Hello Friends,

Today in this blog we create Mouse hover to zoom image & Button. Earlier I have shared a blog on Hotel Booking Registration From using JavaScript.

In that blog we create one button and image whenever mouse will be hover on the image the image will zoom. Button change the color. For that we used the CSS selector to hover the image and button.

CSS syntax

:hover {
  css declarations;
}
<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title> Mouse over effect by codeithub </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h2> mouse over to zoom</h2>
        <img src="Images/5.jpg">
        <h2> button hover</h2>
        <button> submit</button>
    </body>
</html>
       <!-- code by CodeitHub ( https://CodeitHub.com ) -->
        img{
            width: 100px;
            height:100px;
        }
        img:hover
        {
            width: 300px;
            height:300px;
        }
        button{
            background-color:lightseagreen;
        }
        button:hover{
            background-color:magenta;
        }

Leave a Reply

Your email address will not be published. Required fields are marked *