Grow your CSS skills. Land your dream job.

Background image for active state

  • # November 14, 2011 at 8:57 pm

    I am having a hard time coming up with a solution to add a triangle at the top of a thumbnail for this slider when it is the active thumbnail.

    You can view the slider being used here.

    I am using the featured content slider from CSS-Tricks and he has it working, but after altering code I am having issues getting it added.

    This is the CSS that I am using for the active state. I have some of what I should need in there to accomplish this, but not sure the best way to accomplish this.

    .active-thumb {background: url(images/slide-active.png) top center; width: 181px; border: 3px solid #ea5d10}

    Thanks for your help.

    # November 21, 2011 at 9:33 pm
    .active-thumb:before{
    content:"";
    position: absolute;
    bottom: 100%;
    left: 46%;
    display: block;
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #ea5d10 transparent;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".