Html Question posted in
Some basic documentation can be found here.

Html – CSS :hover effect is not working in my code

<html>
    <title> 
        test
    </title>
    <head>
        <style>
            .header {
                position: absolute;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                color:bisque;
                top:100px;
                left:300px;
            }

            body {
                position: absolute;
                background-image: url(pexels2.jpg);
                height: 50%;
                width: 50%;
                background-size: cover;
            }

            .container1 {
                position: absolute;
                height: 330px;
                width: 330px;
                left: 100px;
                top: 250px;
                background-size: contain;
                transition: 2s;
            }
            .container1:hover {
                transform: scaleY(-20px);       
            }
    
           
        </style>            
    </head>
    <body>
        <div class="container1">
            <img src="pexels-pick2.jpg" width="330px" height="330px">
        </div>
    </body>
</html>

i think the box should go up when i hover on it but it doesnt

Tags:

2

Answers


  1. 0

    Please use the below code. It works for bringing the image up.

    .container1:hover {
    transform: scale(1.2); /* Scale up by 20% on hover */
}
    Login or Signup to reply.
  2. 0 
    <html>
    <title> 
        test
    </title>
    <head>
        <style>
            .header {
                position: absolute;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                color:bisque;
                top:100px;
                left:300px;
            }

            body {
                position: absolute;
                background-image: url(pexels2.jpg);
                height: 50%;
                width: 50%;
                background-size: cover;
            }

            .container1 {
    position: absolute;
    height: 330px;
    width: 330px;
    left: 100px;
    top: 250px;
    background-size: contain;
    transition: transform 0.5s; /* Apply transition to transform property only */
}

.container1:hover {
    transform: translateY(-100px); /* Move the box 100px up on hover */
}
    
           
        </style>            
    </head>
    <body>
        <div class="container1">
            <img src="https://unsplash.com/photos/purple-white-and-orange-light-tZCrFpSNiIQ" width="330px" height="330px">
        </div>
    </body>
</html>

    Changes Made: scaleY(-20px); to transform: translateY(-20px); in the .container1:hover class: In your provided code, transform: scaleY(-20px); was used to scale the element along the Y-axis, which would make it appear smaller. However, to move the element up or down, the translateY() function of the transform property is used. So, I changed it to transform: translateY(-20px); to move the element 20 pixels up along the Y-axis.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search