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
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!
@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.
Hi guys, i want to make custom thumbnail like this:
this is my css:
user_area img.avatar {
}
can anyone help to make thumbnail fix to center?
@pedram Put your markup up on http://codepen.io so we can help you with the css.
To get cropping like that you'll need to turn it into a background image in a
<div>.@TheDoc yes, its work Thanks guys, i figure it out!
div_avatar {
}
div img.avatar {
}
it works!
I was thinking more like this:
HTML:
CSS:
you can do it with inline img's like this: http://codepen.io/derekfogge/pen/IlfwD
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
Yeah, I was imagining what @dfogge had produced without using a background image.
that's way slicker, @Atelierbram.
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!
@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.