#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    1
    Rep Power
    0

    Transition for inline showmore


    CSS3
    .showmore {
    content: "";
    cursor: pointer;
    }
    p.showmore:first-line {
    display: inline;
    visibility: visible;
    }
    p.showmore span {
    display: none;
    visibility: hidden;
    }
    p.showmore:hover span {
    display: inline-block;
    transition-duration: 2s;
    visibility: visible;
    z-index: 97;
    }
    HTML5
    <p class="showmore">
    Show more...
    <br />
    <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa.
    </span>
    </p>
    COMMENT
    I cannot get this transition duration to work here.
    Any ideas?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, Mark.Stewart.

    Good question. Not all properties work with CSS3 animations and transitions. "display" is one of the ones that does not.

    P.S. It would be helpful if you put your code between [code][/code] tags in the future.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo