Css animation advice

HTML & CSS
1

kinda slogging my way trough this bit of animation.
http://cdiwwwtest.cdicorp.com/staffing (gv up on the box sizing)
but got in the animation for the two puzzle pieces. w/the z-index for one switching on hover.
However.
I want to add text so it sits next to the image. So far when i added it winds up below or elsewhere. i was also thinking of using jquery instead to change the image on hover. (i don’t think you can have css animation w/background images)
Anyway, could i please have some advice on adding text to the side of the images? (& yes the images look crappy but those are for test only)
thx
D

2

also any way to resize the image w/the animation as well?
with a hover setting it flickers unless the mouse is directly over it is seems. anyway around that?

3

Hi,

You can make the text for the left side show like this:


#ro01 a{position:absolute;}
#ro01sub{
position:relative;
top:0;
float:right;
width:auto;
}
#ro01:hover #ro01sub{display:block}

The above is over-rides to your existing styles and not replacements.

also any way to resize the image w/the animation as well?

You can use scale to enlarge the image.


#ro01:hover img{
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}

(i don’t think you can have css animation w/background images)

You can’t animate the background image properties but you can animate the container that holds the image.

You can find a useful article here on animations.

4

Paul thank you! I hadn’t thought of making the a relative and the addy div absolute. That worked. I had tried the transition/scale but it didin’t quite work so gave that one up. But using instead an opacity transition.
Thanks for the help
D

5

Was wondering if you could get advice on two things:

  1. the sizing is not quite working out in ie cutting off the info in the roll over/hover animation right side. Don’t quite understand why ie is doing that of all things.
  2. I have span for the title. .roHeader. I have been trying to get it to step out of the alignmet of its parent div. placement and margin. So far that doesnt seem possible. do i need to take it out, give it’s own absolute positioning and styling for that to work?
    thank you.
6

You are moving the element using translate but you are not using the real property so IE10 gets nothing. You must always end the vendor prefixed code with the real property.



#ro01:hover {
transform: translate(100px, 0px);
}
#ro02:hover {
transform: translate(-175px, 0px);
}

You need to do that for all your vendor prefixed rules. Note that IE9 doesn’t understand those animation properties so you will have to use conditional comments and move the element over a bit with some absolute positioning on hover instead.

  1. I have span for the title. .roHeader. I have been trying to get it to step out of the alignmet of its parent div. placement and margin. So far that doesnt seem possible. do i need to take it out, give it’s own absolute positioning and styling for that to work?
    thank you.

You could move it with relative positioning.

e.g.


.roHeaders{
position:relative;
left:-10px;
}

Why did you use a span and not a heading tag for a header?

7

Thank you finally got to implement had forgotten about that bit. also used to update the transition for ie.
Got on last question. when i hover either one of the side, the move fine but a bit of the opposite site is still visible until the moving side is fully over it.
How could i get around that?
thanks
D

8

as for the span. at the time i wrote it I was just trying things out. really wasn’t sure i would call it a header, I did in the class, but not officially.

9

Adjust the z-index on hover only to keep the active one on top.

e.g.


#ro01,#ro02{z-index:auto}
#ro01:hover,
#ro02:hover{z-index:999}
10

I was wondering could you advs as why this is not working on an ipad?
thx
D

11

If you are talking about the hover effect then there is no real hover on an ipad. There is only click (touch).

Usually if the element has a hover effect then a first touch will action the hover but this seems to be restricted to elements that can receive focus like links etc. As you are using other elements for the hover then I guess that you will get nothing on the ipad.

I have seen other demos that get around this by adding and empty onclick attribute to the element that has the hover effect (any element that you have applied the main :hover rule to). So for example if you had said p:hover then you would need this html <p onclick=“”> etc…

However the problem with the ipad (and other touch devices) is that once you have activated the hover effect it will not disappear until you click something else. You would probably need to build the same functionality with some js instead.

e.g.From what I can gather it’s something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
.hover { background:red; }
.hover:hover, .hover.over { background:blue }
</style>
</head>

<body>
<p class="hover">Hello</p>
<script>
$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('over');
    });
});
</script>
</body>
</html>

http://www.afxdesign.com/web-design-blog/ipad-web-design/ipad-javascript-hover/

12

Thank you Paul, will go work on that.
D