SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    css animation advice.

    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. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

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

    Code:
    #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.

    Code:
    #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. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    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.
    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.

    Code:
    #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.




    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.
    You could move it with relative positioning.

    e.g.
    Code:
    .roHeaders{
    position:relative;
    left:-10px;
    }
    Why did you use a span and not a heading tag for a header?

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Adjust the z-index on hover only to keep the active one on top.

    e.g.
    Code:
    #ro01,#ro02{z-index:auto}
    #ro01:hover,
    #ro02:hover{z-index:999}

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was wondering could you advs as why this is not working on an ipad?
    thx
    D

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    I was wondering could you advs as why this is not working on an ipad?
    thx
    D
    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.
    Code:
    <!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-...ascript-hover/

  12. #12
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, will go work on that.
    D


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •