How to add overflow : hidden and max widths on images


Tags: html,css,image,overflow

Problem :

I am trying to achieve a slider magazine type layout where the middle container displays the whole picture and the containers to the left and right only show a snippet, (20% of the image.)

I need the left and right container images to remain their height, same as middle image but only show 20% of the image.

How can I achieve this using html and css?

I have created a Fiddle to explain my working,

Please update the fiddle.

Thanks for all your help.

<div class="col-lg-12 image-container">
             <div class="left">
                 <a href="#"><img src="http://www.paulobriendesign.com/img/cover1.jpg" alt="Cover 1"></a>
             </div>
            <div class="center">
                    <a href="#"><img src="http://www.paulobriendesign.com/img/cover1.jpg" alt="Cover 1"></a>
             </div>
            <div class="right">
                     <a href="#"><img src="http://www.paulobriendesign.com/img/cover1.jpg" alt="Cover 1"></a>
             </div>

        </div>


Solution :

I added this to the end of your css rules:

.left, .right {
  overflow: hidden;  
}
.left img, .right img {
    width: 300%;
}
.right img {
    position: relative;
  right: 200%;  
}

Live demo (click).


    CSS Howto..

    html - how to make images stay on certain part of background

    Font Styling Issue ~ how to make font smooth/Strong in html css

    How to use css animate correctly?

    How to make liquid layout in css using em?

    How to use form-inline bootstrap 3?

    how to css absolute positioning right way

    How to change the color of the text next to an input field in an HTML form?

    How does the padding work in responsive CSS square?

    how to get a css that does not cause overflow of words beyond box [closed]

    How to apply CSS to a Mac Chrome Select Box?

    How to make slide down menu to slide up?

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to specify a path to be followed while animating an object in HTML using CSS, JQuery

    List-style: how to hide that extra empty space

    How to set dynamic value in css? [closed]

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    How to fit CSS buttons into table cells?

    How can I make this kind of a border?

    CSS: How to add classes to existing grid that allow skipping columns on the left side

    How i can make that mobile menu fill the 50% of the width of the screen in Wordpress?

    How to stop user agent stylesheets from overriding my css

    How to move an image upwards in html/css

    How to include php page which include also a css file?

    How to grouply select multi elements CSS?

    How should I override hover style of a div in an anchor tag?

    How to get the value of css property with jQuery

    How to execute select() method on polymer elements based on URL?

    How to add a banner inside a div at the bottom?

    How to stop floating right image inside div bleeds over in Google Chrome

    How to show image based on sort type in GridView