How to make custom thumbnail with css?

[pedram]

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

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?

[chrisburton]

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

[TheDoc]

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

`.

[pedram]

@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!

[TheDoc]

I was thinking more like this:

HTML:

CSS:

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

[dfogge]

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

[Atelierbram]

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

[chrisburton]

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

[dfogge]

that’s way slicker, @Atelierbram.

[TheDoc]

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!

[Atelierbram]

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

[Author]

Posts