Create circle menu with background image and hover to slide - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Hover

Description

Create circle menu with background image and hover to slide

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <style>
body {<!--from  w ww . j  a  v a 2s.c o  m-->
   margin:0;
   overflow-y:scroll;
}

#paper {
   height:121px;
   margin:0;
   background:Chartreuse;
}

.wrap {
   margin:0 auto;
   width:181px;
   height:181px;
   border-radius:51%;
   box-shadow:0 0 0 11px white;
   position:relative;
   top:-81px;
   background:yellow;
}

.wrap a {
   margin:0;
   position:absolute;
}

.wrap a .round {
   border-radius:51%;
   width:181px;
   height:181px;
   box-shadow:0 0 0 11px white;
}

.wrap figure img {
   margin:0;
   -webkit-transition:top 0.5s ease-out;
   -moz-transition:top 0.5s ease-out;
   transition:top 0.5s ease-out;
   position:absolute;
   top:201px;
   left:78px;
}

.wrap .two {
   margin:0;
   -webkit-transition:top 0.5s ease-out;
   -moz-transition:top 0.5s ease-out;
   transition:top 0.5s ease-out;
   opacity:0.9;
   top:0;
}

.wrap .three {
   margin:0;
   -webkit-transition:top 0.5s ease-out;
   -moz-transition:top 0.5s ease-out;
   transition:top 0.5s ease-out;
   opacity:0.9;
   top:0;
}

.wrap:hover .one {
   opacity:0.9;
}

.wrap a.one:hover {
   opacity:2;
   z-index:3;
}

.wrap:hover .two {
   top:301px;
}

.wrap a.two:hover {
   opacity:2;
   z-index:3;
}

.wrap:hover .three {
   top:151px;
}

.wrap a.three:hover {
   opacity:2;
   z-index:3;
}

.wrap:hover figure img {
   top:501px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="paper"></div> 
  <div class="wrap"> 
   <a class="two" href="https://www.java2s.com/style/demo/Opera.png"> <img class="round" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> </a> 
   <a class="three" href="https://www.java2s.com/style/demo/InternetExplorer.png"> <img class="round" src="https://www.java2s.com/style/demo/Google-Chrome.png" alt=""> </a> 
   <a class="one" href="https://www.java2s.com/style/demo/Opera.png"> <img class="round" src="https://www.java2s.com/style/demo/Firefox.png" alt=""> </a> 
   <figure> 
    <img src="https://www.java2s.com/style/demo/Safari.png" alt=""> 
   </figure> 
  </div>  
 </body>
</html>

Related Tutorials