Grow your CSS skills. Land your dream job.

How to make custom thumbnail with css?

  • # January 5, 2013 at 9:47 am

    Hi guys,
    i want to make custom thumbnail like this:

    Resident Evil Upload Center

    this is my css:

    #user_area img.avatar {
    border:1px solid #000000;
    width: 30px;
    height: 30px;
    background: #000000;
    display: block;
    }

    can anyone help to make thumbnail fix to center?

    # January 5, 2013 at 12:04 pm

    @pedram Put your markup up on http://codepen.io so we can help you with the css.

    # January 5, 2013 at 1:04 pm

    To get cropping like that you’ll need to turn it into a background image in a `

    `.
    # January 5, 2013 at 1:37 pm

    @TheDoc yes, its work
    Thanks guys, i figure it out!

    #div_avatar {
    width: 30px;
    height: 30px;
    border: 1px solid #000000;
    overflow: hidden;
    position: relative;
    float: left;
    margin: 2px 10px 0 0;
    }
    #div img.avatar {
    width: 30px;
    height: auto;
    padding: 1px;
    position: absolute;
    }

    it works!

    # January 5, 2013 at 2:03 pm

    I was thinking more like this:

    HTML:

    CSS:

    .avatar {
    width: 30px;
    height: 30px;
    background: url(‘/your/path/to/image.jpg’);
    float: left;
    /* etc */
    }

    # January 5, 2013 at 2:13 pm

    you can do it with inline img’s like this: http://codepen.io/derekfogge/pen/IlfwD

    # January 6, 2013 at 2:24 pm

    Forked dfogge’s codepen with inline img’s, here with absolute positioning and css clip property ( with added/bonus hover state ): http://codepen.io/atelierbram/pen/DplKs

    # January 6, 2013 at 2:34 pm

    Yeah, I was imagining what @dfogge had produced without using a background image.

    # January 6, 2013 at 2:53 pm

    that’s way slicker, @Atelierbram.

    # January 7, 2013 at 1:52 am

    Ver cool, not particularly flexible though. I had a feeling the OP was referring to a solution that would be able to work on *any* image, but I could be wrong!

    # January 7, 2013 at 6:55 pm

    @dfogge: thanks! @TheDoc: inflexible indeed; awkward in layout (: element with clip property needs to have absolute positioning), difficult to maintain: need to set clip property values for every single thumbnail in order to determine the ‘focalpoint’. So is this worth it for only a cool hover state? Maybe not on a blogroll, but then for some it might. So I made this new codepen with a kind of ‘grid-helper image':
    http://codepen.io/atelierbram/pen/Ipzhi.
    Work in progress.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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