Give help. Get help.

  • # 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 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:



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

    # 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 ):

    # 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’:
    Work in progress.

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

You must be logged in to reply to this topic.