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

    how to align the content of a box

    How Can I use CSS to Add an Element Below another Element?

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    Show a sharing icon on hover on image

    Is there a limit to how deep an HTML document or CSS tree can be?

    How to get a list of css attributes of an element with jquery

    How to add margin-top to Responsive Multi-Level Menu and not effect navigation animation?

    How to place Social media icons on right side of navbar

    How can I fill the remaining space when dealing with an inline ul?

    How to add Navigation dropdown menu?

    How to place elements on top of each other

    How to show/hide div on click with stricly HTML/CSS

    How to center hgroup in css

    How to give a css code for combined classes in HTML [duplicate]

    How to include transparency in html/css?

    How to make a list of “background-image” CSS using WebDriver with Java

    CSS background 100% height - How to do?

    How can I make width flexible with CSS when using bootstrap's responsive design?

    How do I link JS file from other folder to a page?

    How to change text color for link in tr element with CSS

    How to not change color of link on hover

    How to bottom align a title of variable length

    how to replace text with image in html/css

    How to auto adjust parent DIV height according to the contents in child DIV?

    Show missing CSS in Google Chrome

    How can I control my

    styling in another styling?

    image shows ui-button over the button image

    CSS: how to make a span only as wide as its content

    How to style a outgoing email from contact form with CSS

    How to reference CSS from libraries installed via npm?