Grow your CSS skills. Land your dream job.

Anything Slider (Position Numbers Help)

  • # February 4, 2013 at 4:32 pm

    So i just noticed Css-tricks was behind the slider i was using, its amazing so first thanks for that.

    Im trying to position numbers over my images in the slider.
    p id=”text1″ >1

    But when i add it under
    ul id=”slider”

    They simply dont display, but when i add it outside `

    # February 4, 2013 at 7:28 pm

    Hi Dext3r!

    If you don’t care about IE7 and older, you can use css counters to add the numbers above each image. I ended up modifying the html a bit ([demo](http://jsfiddle.net/Mottie/ycUB6/4074/)):

    • WEEK 05

      AudioJungle

      AudioJungle

      AudioJungle

      AudioJungle

      AudioJungle


      AudioJungle

      AudioJungle

      AudioJungle

      AudioJungle

      AudioJungle


    and I used this css:

    #slider, #slider li {
    width: 1200px;
    height: 700px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    }
    img {
    box-shadow: 0.9px 0.9px 8px #000;
    width: 134px;
    height: 193px;
    margin: 20px;
    }
    .fade {
    opacity: 1;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -webkit-transition: opacity .35s ease-in-out;
    }
    .fade:hover {
    opacity: 0.6;
    }
    #slider li {
    counter-reset: dvdcounter;
    }
    #slider li span {
    display: block;
    margin-left: 170px;
    }
    #slider li span:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }
    #slider li p {
    position: relative;
    float: left;
    counter-increment: dvdcounter;
    text-align: center;
    }
    #slider li p:before {
    content: counter(dvdcounter);
    z-index: 100;
    position: absolute;
    font-size: 34px;
    color: #979797;
    font-weight: bold;
    top: -35px;
    left: 40%;
    margin: 0;
    font-family:’BebasRegular';
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
    }

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".