Hover Button to change the background of div and fly a picture in between two blocks - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Hover Button to change the background of div and fly a picture in between two blocks

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>CSS Background Color Change on Hover</title> 
  <style>

* {<!--  w w w.j a v  a  2  s.  c  o  m-->
   margin: 0;
   padding: 0;
}
body {
   background: #e5e5e5;
}
.suction {
   width: 50%;
   background: transparent;
   margin: 10px auto;
   position: relative;
   text-align:center;
}
.block {
   width: 20%;
   padding: 25px 0;
   display:inline-block;
   margin: 10px;
}
.bg {
   z-index: -1;
   position: absolute;
   top: 0;
   left: 0;
   transition: .25s;
   pointer-events: none;
   width: 100%;
   height: 100%;
}
li {
   list-style: none;
   z-index: 50;
}
li a {
   display: block;
   float: ;
   width: 20%;
   padding: 25px 0;
   text-align: center;
   font-weight: 700;
   letter-spacing: 1px;
   font-size: 40px;
   color: #fff;
   background: #ccc;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
   transition: .25s;
}
li a:hover {
   margin: -10px 0 0 0;
}
.ajabmenu {
   margin: 60px auto 0 auto;
   border-radius: 10px;
   overflow: hidden;
   display: block
}
.ajabmenuu li:first-child a {
   background: #ffca6d !important;
}
.ajabmenu li:nth-child(2) a {
   background: #ff6d6d !important;
}
.ajabmenu li:nth-child(3) a {
   background: #6dffb9 !important;
}
.ajabmenu li:nth-child(4) a {
   background: #6dcaff !important;
}
.ajabmenu li:nth-child(5) a {
   background: #ec6dff !important;
}
.ajabmenu li:first-child:hover ~ .bg {
   background: #ffca6d url("https://www.java2s.com/style/demo/Firefox.png") no-repeat center center fixed;
}
.ajabmenu li:nth-child(2):hover ~ .bg {
   background: #ff6d6d;
}
.ajabmenu li:nth-child(3):hover ~ .bg {
   background: #6dffb9;
}
.ajabmenu li:nth-child(4):hover ~ .bg {
   background: #6dcaff;
}
.ajabmenu li:nth-child(5):hover ~ .bg {
   background: #ec6dff;
}


      </style> 
 </head> 
 <body translate="no"> 
  <center> 
   <div class="suction"> 
    <ul class="ajabmenu"> 
     <div class="block"> 
      <li> <a href="#">h</a> </li> 
      <li> <a href="#">g</a> </li> 
      <li> <a href="#">i</a> </li> 
      <li class="bg"></li> 
     </div> 
     <div class="block"> 
      <li> <a href="#">p</a> </li> 
      <li> <a href="#">l</a> </li> 
      <li> <a href="#">m</a> </li> 
      <li class="bg"></li> 
     </div> 
    </ul> 
   </div> 
  </center>  
 </body>
</html>

Related Tutorials