how to show a portion of image like on 9gag.com


Tags: javascript,html,css,image

Problem :

how to show only a portion( in this case is to hide the watermark) of image like on 9gag.com, I tried to use clip in css, but it requires image to be position absolute, which is a no no for me.

is there other way to do this in css? js is ok too.

thank you.

//////////////////////////////////////////////// here is the solution to my problem, took me a while to figure out i can use a margin attribute, silly me

img {margin:0 auto -33px;}


Solution :

Yes, use the CSS overflow property. You can do overflow: hidden; to clip out entities beyond the width and height of a container.

You can learn more at W3schools: http://www.w3schools.com/cssref/pr_pos_overflow.asp They even have an example for you to try out.


    CSS Howto..

    Slickgrid - How to add css at grid creation time?

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How do I design a css gradient to look like the attached Facebook Login screen

    How to add css to Vaadin / Maven project?

    how to add/remove a class from a link

    Jquery - 100% width slideshow whilst keeping the height propotional

    How to make background image position stay same on all resolutions?

    How to setup counters for target-counters

    How to remove the effect of all the parent containers on any child control

    How do I center two divs within a larger div?

    How to limit jquery selectable to 1 tr and pass selected items to another page

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    How to create an enumerated tabular environment in HTML/CSS?

    How to detect single letters and modify their look/css

    How to make footer responsive through CSS?

    How to make text vertical in a jQuery UI Layout toggler?

    How do you set a JavaScript onclick event to a class with css

    How do I span columns with a div based table?

    How to make image “hang over” above background?

    How to Make DD Wrap under DT When DD Content has No Spaces

    How to style a list of links with CSS?

    How to apply css style to custom attributes

    How to force the casing of letters in a textbox

    How to manage css of big websites within team environment without mess?

    How to apply css style for dynamic tr with td and input tag?

    How to highlight a whole table cell with padding when hovering?

    Bootstrap: how to stack divs of different heights?

    How to I have a within a
  • align to the right side of the
  • How to dynamically change CSS class of DIV tag?

    how do I select a single tag in the middle of many of the same in CSS?