CSS Overflow

 

The overflow css property controls the boundry of content that means content goes outside the boundry or not. The default value is visible. Suppose a div that we have specified the width to be 200px wide, but it contains image that is 300px wide. That image will goes out of the div and be visible. Where if you specify the overflow value to hidden, the image will cut off at 200px.

CSS overflow has 5 values.
1) Visible
2) Inherit
3) Hidden
4) Auto
5) Scroll

Visible

If you don't specify the overflow property, the default is visible. So in general, there is no need to explicitly set this property to visible unless you are over-riding it from other values.

#img_hover3{overflow:visible} 

Hidden

The opposite of the default visible is hidden. This literally hides any content that goes outside of div or box.

#img_hover3{overflow:hidden}

This is particularly useful in use with dynamic content & responsive website design  and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible. So the above css hides the content beyond the box.

Scroll

Specifying the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the content in the box.

#img_hover3{overflow:scroll}

It is usefull for a long content to display in the short box that will helps to display full content by provind scroll to that content.

Auto

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don't need them. The scrollbars will only appear if there is content that actually goes out of the element. Otherwaise it will not show the scrollbar.

#img_hover3{overflow:auto}

Demo/Example

overflow:hidden

overflow:auto/scroll