Hi dear welcome to "CodePrime" Blog . In this post we are going to learn to how to use CSS overflow property. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css overflow property</title>
</head>
<body>
<div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcTPwtcS17EoOIv1Ozp7jLIT1NZzOBv9nzZLQKEY2Iu1TJqW1PYutny-ffonK6XQ2RlF12dEnTYAb-PROKgKtKcqeGGb2rShQO0I6oV63r5w5Xn-xPnbhfTL5wKE9t1bR4i3y_TRLZd9VE3dfH4Fd2XHpRmpLhPGQzFpVj0ipj1k_HFzzHitax8Zhl4w/s1600/man.jpg" >
</div>
</body>
</html>
CSS
body{
display: flex;
justify-content: center;
min-height: 100vh;
width: 100%;
background: linear-gradient(#0000ff, #fff);
}
.box {
position: relative;
width: 250px;
height: 300px;
background: yellow;
border: 2px solid #fff;
margin: auto;
/* uncoment the property and try example */
overflow: hidden;
/* overflow: visible; */
/* overflow: hidden; */
/* overflow: auto; */
/* overflow-x: auto;
overflow-y: auto; */
}
.box img{
width: 500px;
}
0 Comments