Overflow: hidden is not working with images
Since #portrait is not allowed to overflow the images thenyou need one additional container with the specified width that will hold these the images inside.Do it like this:
<div id="portrait"> <div id="wrapper"> your images...And then apply
#wrapper{ height:30%; overflow:hidden; width: 1000px; /* it is only important to be bigger then parent for one image width size */}.image{ height: 100%;
I had a problem where my video disappeared when I used overflow hidden. Turned out I needed to set the width of the container and not only the height.And I didn't have to use any positioning on the container.
Apply the overflow: hidden; property to the container and not the image. It will solve your problem!!