HTML CSS hover not working -
today trying achieve animated icon, got in trouble css. upcomming code more can say:
.menu { width: 100%; height: 50px; position: fixed; background-color: #35f5ca; top: 0; left: 0; } .title { font-family: "sans-serif"; position: fixed; top: 1%; left: 0; vertical-align: middle; font-size: 150%; color: white; } .icon:hover { width: 45px; height: 45px; position: fixed; right: 0px; top: 0px; opacity: 1.0; } .body {}
<div class="menu"> <p1 class="title"> <b> mettu </b> <img class="icon" src="images/iconplanet.png" style="transition: 0.5s; width:40px; height:40px; position:fixed; right: 5px; top: 0.5%; opacity: 0.5;" /> </p1> </div> <div class="body"> </div>
please don't correct code, , tell me did wrong. thank you!
add style css, , .menu should .menu
.menu { width: 100%; height: 50px; position: fixed; background-color: #35f5ca; top: 0; left: 0; } .title { font-family:"sans-serif"; position:fixed; top: 1%; left: 0; vertical-align: middle; font-size: 150%; color: white; } .icon { transition: 0.5s; width:40px; height:40px; position:fixed; right: 5px; top: 0.5%; opacity: 0.5; } .icon:hover { width:45px; height:45px; position:fixed; right: 0px; top: 0px; opacity: 1.0; } .body { }
<html> <head><title>mettu</title> <head> <body> <div class="menu"> <p1 class="title"> <b> mettu </b> <img class="icon" src="images/iconplanet.png" /> </p1> </div> <div class="body"> </div> <?php //menu //menu's brain ?> </body> <html>
Comments
Post a Comment