SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I use transition/animations on pseudo elements?

    I have made a tooltip that appears upon hovering an icon.

    Can i use transitions to fade in the tooltip? Because I can't get in to work.

    Here is my code:

    Code CSS:
        .tooltip{
            display: inline;
            position: relative;
        }
        .tooltip:after{
            opacity: 0;
           transition: opacity .25s ease-in-out;
           -moz-transition: opacity .25s ease-in-out;
           -webkit-transition: opacity .25s ease-in-out;
        }
        .tooltip:hover:after{
            background: #555;
            bottom: 60px;
            color: #fff;
            content: attr(data-title);
            left: -110px;
            padding: 10px 15px;
            position: absolute;
            z-index: 98;
            width: 220px;
            font-size: .7em;
            letter-spacing: 1px;
            text-align: center;
            opacity: 1;
        }

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Transitions for pseudo elements only work in the latest versions of Chrome 27+


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
  •