How to avoid an image to move on mouse hover

Question

0.00/5 (No votes)

See more:

Hi! I dont want image inside a div to move on mouse hover....
This is the code I am using but it is moving the image on mouse hover,how to avoid that?

CSS

<style type="text/css">

        .image {
            position: relative;
            width: 154px;
            height: 200px;
         }

        .image img {
            max-width: 150px;
            max-height: 150px;
            margin-left:100px;
            margin-right:100px;
            margin-top:100px;
            position: relative;

            }

        .hoverimage {
            position: absolute;
            top: 120px;
            left: 0;
            display: none;
           
        }

        .wrapper:hover .hoverimage {
            display: block;
            position:absolute;
            margin-left:123px;
            width:100px;
         }
        .main-wrapper:hover {
            border: 2px solid #7c97b4;
            width:auto;
            height:auto;
            display:block;
            width:300px;
            height:300px;
        }
        .main-wrapper {
           
            border-radius: 5px 5px 5px 5px;
            float: left;
            height: auto;
            margin-right: 1px !important;
            padding: 6px;
            position: absolute;
            
          }
     </style>

ASP.NET

</head>
<body>
    <form id="form1" runat="server">
       <div class="main-wrapper">
            <div class="wrapper">
            <div class="image">
                <img src="../Images/BlakeLively.jpg" alt="" />
                <a href="../Default.aspx">
                    <img class="hoverimage" src="../Images/buy-button.jpg" alt="" /></a>
            </div>
        </div>
           </div>
    </form>

Posted 18-Jun-13 4:11am

El Dev

Updated 18-Jun-13 4:41am

Zafar Sultan

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Zafar Sultan · Answer 1 · 2013-06-18T04:49:00

Here are few problems:
1. You have a wrapper div inside main-wrapper div, but its class is not declared in style declaration.
2. Your image class has width 154px but the container class(.wrapper:hover .hoverimage ) has width of 100px
3. You don't have border for main-wrapper, but on mouse over you are adding border. Obviously it will take space and move the contents. One workaround is to add a border to it and change its color on mouse over or set its border color to the color of background(may be white).

I changed your code and checked, it worked for me. You also try this. But keep in mind, I used my images. I don't know what is the height and width of your images so change height and width of div's as per your requirement.

CSS

<style type="text/css">
        .image
        {
            position: relative;
            width: 154px;
            height: 200px;
            float: right;
        }
        .hoverimage
        {
            position: absolute;
            top: 120px;
            left: 0;
            display: none;
        }
        
        .wrapper
        {
            position: relative;
            margin-left: 123px;
            width: 160px;
            float: left;
        }
        .main-wrapper:hover
        {
            border: 2px solid #7c97b4;
            padding: 6px;
        }
        .main-wrapper
        {
            border-radius: 5px, 5px, 5px, 5px;
            float: left;
            height: auto;
            margin-right: 1px !important;
            padding: 6px;
            position: absolute;
            border: 2px solid Gray;
        }
    </style>

ASP.NET

<form id="form1" runat="server">
    <div class="main-wrapper">
        <div class="wrapper">
            <div class="image">
                <img src="images/template10.jpg" alt="" />
                <a href="Default.aspx">
                    <img class="hoverimage" src="images/check48.png" alt="" /></a>
            </div>
        </div>
    </div>
    </form>

Sergey Alexandrovich Kryukov · Answer 2 · 2013-06-18T04:31:00

Solution 1

Normally, nothing really moves on mouse hover. If it moves, it means that you have added some code to move it. Remove that code if you don't need motion. :-)

—SA

Posted 18-Jun-13 4:31am

Sergey Alexandrovich Kryukov

Comments

El Dev 18-Jun-13 10:40am

Did you check my code,it is like moving somehow when I mouse hove I want it to be fixed.The image inside.

Sergey Alexandrovich Kryukov 18-Jun-13 12:00pm

Yes I did. You are not moving anything in this part of code; if something moves, it's somewhere else. Where?
—SA