Why is this image moving relative to it's sibling and not the parent?

StackOverflow https://stackoverflow.com/questions/19204337

  •  30-06-2022
  •  | 
  •  

Question

Fiddle:http://jsfiddle.net/FtQ4d/1/

I'm doing HTML and CSS for one of my classes, and I've created sort of a landing page for my project. I just want it to say INDEX.HTML on the top and have images of a left and right hand on the bottom of the page. I'm using CSS to animate the hands to move independently off the screen when hovered over and return in a few seconds. This is working somewhat well with the left hand, but when I hover over the right hand, both of the hands end up moving down. How can I fix this?

HTML

<html>
<head>
    <title>Hand (Working Title)</title>
    <link type="text/css" rel="stylesheet" href="handstyle.css"/>
</head>
<body>
    <div id="ind_wrap">
        <p id="ind">INDEX.HTML</p>
        <img src="r_hand.png" id="r_hand">
        <img src="l_hand.png" id="l_hand">
    </div>
</body>

And here is my CSS:

body {
    overflow:hidden;
}
#ind_wrap {
    height:100%;
    width:100%;
}
#ind {
    font-size:1400%;
    color:white;
    font-family:Lazy Sunday;
    text-align:center;
    text-shadow: 3px 1px #000000;
    margin-top:-2%;
}
#span_e {
    color:black;
}
#r_hand {
    background-image:url("rhand.png");
    margin-top:-28%;
    margin-left:50%;
    height:100%;
    width:35%;
    animation:fr_bottom 4s 1;
}
#r_hand:hover {
    animation:m_right 4s 1;
}
#l_hand {
    margin-top:-52%;
    margin-left:8%;
    height:100%;
    width:35%;
    animation:fl_bottom 4s 1;
}
#l_hand:hover {
    animation:m_left 3s 1;
}
@keyframes fr_bottom{
    0%{margin-top:100%;}
    100%{margin-top:-28%;}}

@keyframes fl_bottom{
    0%{margin-top:100%;}
    100%{margin-top:-52%;}}

@keyframes m_left{
    0%{transform:rotate(0deg);margin-left:8%;margin-top:-52%}
    100%{transform:rotate(-50deg);margin-left:2%;margin-top:100%;}}

@keyframes m_right{
    0%{transform:rotate(0deg);margin-left:50%;margin-top:-28%;}
    100%{transform:rotate(50deg);margin-left:52%;margin-top:100%;}}
Was it helpful?

Solution

There are problems with your HTML. The left hand is not REALLY to the left of the right hand, it just looks that way because the line wraps and the hand ends up on the next line. That's why you need margin-top:-52% for the one and margin-top:-28% for the other to get then to line up on the same vertical position on the screen. You should fix that first.
Also, since everything has vertical-align:baseline by default, the two images align themselves to each other's bottoms. That is, if one moves down, the other moves down too. But that is easily fixed by giving them vertical-align:top explicitly.

Now I fiddled a bit with your fiddle, but by the time I was done, I had changed so much, removed so much stuff unnecessary for the demo, that I'm not sure you can still use it. Here it is, just in case.

(I wasn't able to fix some of the problems though. If you hover the mouse near the top of the hand, it will slide down a little bit but then it will no longer be hovered over; and it will disappear from view because the other animation kicks in. The full slide down effect happens only when you have the mouse near the bottom of the window.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top