Assignment (Transitions and transformations)
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 Assignment</title>
<link rel="stylesheet"href="Assignment.css"/>
</head>
<body>
<div id="box1">This is box1</div>
<div id="box2">This is box2</div>
<div id="box3">This is box3</div>
<div id="box4">This is box4</div>
<div id="myPic">This is myPic</div>
</body>
</html>
CSS
#box1
{
width:150px;
height:150px;
background:green;
}
#box1:hover{
height: 100px;
width: 100px;
transition: width 2s ease-in o.5s;
}
#box2{
width:100px;
height:100px;
background:red;
}
#box2:hover{
transform: rotate(90deg) translate(200px,200px);
}
#box3{
width:100px;
height:100px;
background:lightblue;
}
#box3:hover{
transform: skewX(20deg);
}
#box4{
width:100px;
height:100px;
background:lightgreen;
}
#box4:hover{
box-shadow: 2px 2px 5px green;
}
#myPic{
width: 200px;
height: 200px;
background: pink;
background-image: url(https://images.unsplash.com/photo-1610568781018-995405522539?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmF0bWFufGVufDB8fDB8fHww);
background-size: cover;
opacity: 50%;
}
Comments
Post a Comment