Untitled
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> </div> </body> </html> css * { margin: 0; padding: 0; } html,body{ height: 100%; width: 100%; } body{ background-image: url("bg-img.jpeg"); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; } .container { height: 200px; width: 200px; display: flex; border: 0px solid red; transition: all 1s ease-out 0s; background-color:black; } .container:hover{ border-radius:50%; transition: all 1s ease-out 0s; }
Leave a Comment