CSS Hover для блока (слоя)


Ниже размещены несколько примеров hover-эффектов (css-анимация при наведении) для блока (слоя), а также указаны основные исходные значения (параметры) используемые в демонстрационных примерах.
position: absolute;
background-color: #13C4A5;
CSS увеличение
#demo1 {
   transition: all 300ms linear 0ms;
}
#demo1:hover {
  
transform: rotate(0deg) scale(1.1,1.1) ;
  
box-shadow: 5px 5px 0px #A5A5A5;
  
z-index: 999;
  
transition: transform 300ms linear 0ms,
box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
}
position: absolute;
background-color: transparent;
Слой 1
Слой 2
#demo2 {
  
overflow: hidden;
}
#layer1 {
   position: absolute;
   left: 0px;
   width: 410px;
   height: 80px;

   transition: all 500ms linear 0ms;
}
#layer2 {
   position: absolute;
   left: 205px;
   width: 205px;
   height: 80px
;
}
#layer1:hover {
  
left: -100%;
   transition: left 500ms linear 0ms;
}
<div id="demo2">
   <div id="
layer1">
      <span>
Слой 1</span>
            <div id="
layer2">
               <span>
Слой 2</span>
      </div>
   </div>
</div>

#demo2 {
   position: absolute;
   text-align: center;
  
width: 205px;
   height: 80px;
}
#layer1 {
   text-align: center;
}
#layer2 {
   text-align: center;
}
position: absolute;
background-color: #77A1A0;
Внутренняя тень 1
#demo3 {
  
transition: all 500ms linear 0ms;
}
#demo3:hover {
  
box-shadow: 0 0 40px 40px #13C4A5 inset;
   transition: box-shadow 500ms linear 0ms;
}
position: absolute;
background-color: #C5C5C5;
Внутренняя тень 2
#demo4 {
  
box-shadow: 0 -3px 0 rgba(0,0,0,0.15) inset;
  
transition: all 500ms linear 0ms;
}
#demo4:hover {
 
box-shadow: 0 0 0 50px rgba(0,0,0,0.25) inset;
  
transition: box-shadow 500ms linear 0ms;
}
position: absolute;
background-color: #13C4A5;
Градиент снизу вверх
#demo5 {
  
background-image: -webkit-linear-gradient(top, transparent 50%, #ff7f50 50%);
  
background-image: linear-gradient(to bottom, transparent 50%, #ff7f50 50%);
  
background-position: 0% 0%;
  
background-size: 210%;
  
transition: all 500ms linear 0ms;
}
#demo5:hover {
  
background-position: 0 100%;
  
transition: background-position 500ms linear 0ms;
}
position: absolute;
background-color: #3695C1;
Угловой градиент
#demo6 {
  
background-image: -webkit-linear-gradient(45deg, #ed1c5b 50%, transparent 50%);
  
background-image: linear-gradient(45deg, #ed1c5b 50%, transparent 50%);
  
background-position: 100%;
  
background-size: 250%;
  
transition: all 700ms linear 0ms;
}
#demo6:hover {
  
background-position: 0;
  
transition: background-position 700ms linear 0ms;
}
position: absolute;
background-color: #77A1A0;
Градиент блик
#demo7 {
  
background-size: 200% auto;
  
background-image: linear-gradient(to right,
#77a1a0 0%, #c2e9fb 51%, #77a1a0 100%);
  
transition: all 300ms linear 0ms;
}
#demo7:hover {
  
background-position: right center;
  
transition: background-position 300ms linear 0ms;
}
position: absolute;
border: 5px #...... solid;
#demo8 {
   background-color: #3695C1;
   border: 5px #FFFFFF solid;
   transition: all 1500ms ease 0ms;
}
#demo8:hover {
  
border-radius: 180px;
  
transform: rotate(720deg) ;
  
transition: border-radius 1500ms ease 0ms, transform 1500ms ease 0ms;
}
/*css-анимация для синего квадрата*/
#demo9 {
   background-color: #ED1C5B;
   border: 5px #ED1C5B solid;
   border-radius: 360px;
   box-sizing: border-box;
   transition: all 500ms ease 0ms;
}
#wb_arrow1 {
   position: absolute;
   left: 10px;
   top: 10px;
}
#demo9:hover {
  
transform: rotate(45deg) ;
  
transition: transform 500ms ease 0ms;
}
/*css-анимация для красного круга*/
#demo10 {
   background-color: #F1C40F;
   border: 5px #F1C40F solid;
   border-radius: 15px;
   box-sizing: border-box;
   transition: all 1500ms ease 0ms;
}
#wb_arrow2 {
   position: absolute;
   left: 10px;
   top: 10px;
}
#demo10:hover {
  
border-radius: 180px;
  
transform: rotate(720deg) ;
  
transition: border-radius 1500ms ease 0ms, transform 1500ms ease 0ms;
}
/*css-анимация для желтого квадрата*/
#demo11 {
   background-color: #13C4A5;
   border: 5px #FFFFFF solid;
   border-radius: 360px;
   transition: all 500ms ease 0ms;
}
#demo11:hover {
  
transform: rotateX(0deg) rotateY(360deg) ;
  
transition: transform 500ms ease 0ms;
}
/*css-анимация для зеленого круга*/