cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="main-container">
  <section class="section">
    <h2 class="title">Effect 1</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 2</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover2" data-hover-label="Home"><span class="menu__label hover2__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover2" data-hover-label="About"><span class="menu__label hover2__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover2" data-hover-label="Contacts"><span class="menu__label hover2__label">Contacts</span></a>
      </li>
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 3</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover3"><span class="menu__label hover3__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover3"><span class="menu__label hover3__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover3"><span class="menu__label hover3__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 4</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover4"><span class="menu__label hover4__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover4"><span class="menu__label hover4__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover4"><span class="menu__label hover4__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 5</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover5" data-hover-label="Home"><span class="menu__label hover5__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover5" data-hover-label="About"><span class="menu__label hover5__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover5" data-hover-label="Contacts"><span class="menu__label hover5__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 6</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover6"><span class="menu__label hover6__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover6"><span class="menu__label hover6__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover6"><span class="menu__label hover6__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 7</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover7"><span class="menu__label hover7__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover7"><span class="menu__label hover7__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover7"><span class="menu__label hover7__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 8</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover8"><span class="menu__label hover8__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover8"><span class="menu__label hover8__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover8"><span class="menu__label hover8__label">Contacts</span></a>
      </li>	
    </ul>
  </section>  
  <section class="section">
    <h2 class="title">Effect 9</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover9"><span class="menu__label hover9__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover9"><span class="menu__label hover9__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover9"><span class="menu__label hover9__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 10</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover10"><span class="menu__label hover10__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover10"><span class="menu__label hover10__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover10"><span class="menu__label hover10__label">Contacts</span></a>
      </li>	
    </ul>
  </section>  
  <section class="section">
    <h2 class="title">Effect 11</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover11" data-hover-label="Home"><span class="menu__label hover11__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover11" data-hover-label="About"><span class="menu__label hover11__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover11" data-hover-label="Contacts"><span class="menu__label hover11__label">Contacts</span></a>
      </li>	
    </ul>
  </section>    
  <section class="section">
    <h2 class="title">Effect 12</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover12" data-hover-label="Home"><span class="menu__label hover12__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover12" data-hover-label="About"><span class="menu__label hover12__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover12" data-hover-label="Contacts"><span class="menu__label hover12__label">Contacts</span></a>
      </li>	
    </ul>
  </section>      
  <section class="section">
    <h2 class="title">Effect 13</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover13" data-hover-label="Home"><span class="menu__label hover13__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover13" data-hover-label="About"><span class="menu__label hover13__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover13" data-hover-label="Contacts"><span class="menu__label hover13__label">Contacts</span></a>
      </li>	
    </ul>
  </section>      
  <section class="section">
    <h2 class="title">Effect 14</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover14" data-hover-label="Home"><span class="menu__label hover14__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover14" data-hover-label="About"><span class="menu__label hover14__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover14" data-hover-label="Contacts"><span class="menu__label hover14__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 15</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover15"><span class="menu__label hover15__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover15"><span class="menu__label hover15__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover15"><span class="menu__label hover15__label">Contacts</span></a>
      </li>	
    </ul>
  </section> 
  <section class="section">
    <h2 class="title">Effect 16</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover16"><span class="menu__label hover16__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover16"><span class="menu__label hover16__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover16"><span class="menu__label hover16__label">Contacts</span></a>
      </li>	
    </ul>
  </section>   
  <section class="section">
    <h2 class="title">Effect 17</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover17"><span class="menu__label hover17__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover17"><span class="menu__label hover17__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover17"><span class="menu__label hover17__label">Contacts</span></a>
      </li>	
    </ul>
  </section> 
  <section class="section">
    <h2 class="title">Effect 18</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover18" data-hover-label="Home"><span class="menu__label hover18__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover18" data-hover-label="About"><span class="menu__label hover18__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover18" data-hover-label="Contacts"><span class="menu__label hover18__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
  <section class="section">
    <h2 class="title">Effect 19</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover19"><span class="menu__label hover19__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover19"><span class="menu__label hover19__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover19"><span class="menu__label hover19__label">Contacts</span></a>
      </li>	
    </ul>
  </section>   
  <section class="section">
    <h2 class="title">Effect 20</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover20"><span class="menu__label hover20__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover20"><span class="menu__label hover20__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover20"><span class="menu__label hover20__label">Contacts</span></a>
      </li>	
    </ul>
  </section>     
</div>
<footer class="footer">
  <div class="main-container footer__container">
    <a href="http://stas-melnikov.ru/donate/" rel="noopener noreferrer" target="_blank">Liked? Please, look the page</a>      
    <a href="http://stas-melnikov.ru" class="melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a>
  </div>
</footer>
            
          
!
            
              /*
* core styles
*/

/* effect 1 */

.hover1{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hover1:before, .hover1:after,
.hover1__label:before, .hover1__label:after{
  content: "";     
  position: absolute;   
  transition: transform .2s ease-out;
}

.hover1:before, .hover1:after{
  width: 100%;
  height: 2px;
  left: 0;
}

.hover1:before{
  top: 0;
  transform: translate3d(-105%, 0, 0);
}

.hover1:after{
  bottom: 0;
  transform: translate3d(105%, 0, 0);
}

.hover1__label:before,
.hover1__label:after{
  width: 2px;
  height: 100%;
  top: 0;
}

.hover1__label:before{
  left: 0;
  transform: translate3d(0%, -100%, 0);
}

.hover1__label:after{
  right: 0;
  transform: translate3d(0%, 100%, 0);
}

.hover1:hover:before, .hover1:focus:before,
.hover1:hover:after, .hover1:focus:after,
.hover1:hover .hover1__label:before, .hover1:focus .hover1__label:before,
.hover1:hover .hover1__label:after, .hover1:focus .hover1__label:after{
  transform: translate3d(0, 0, 0);
}

/* effect 2 */

.hover2{
  display: inline-block;
  position: relative;
}

.hover2:before{
  content: '' attr(data-hover-label) '';
  position: absolute;
  top: 0;
  transform: rotateY(90deg);
  transition: transform .1s linear;
}

.hover2:hover:before, .hover2:focus:before{
  transition-delay: .2s;
  transform: rotateY(0deg);
}

.hover2:hover .hover2__label, .hover2:focus .hover2__label{
  transform: rotateY(90deg);  
  transition-delay: 0s
}

.hover2__label{
  display: inline-block;
  transform: rotateY(0);
  transition: transform .1s linear .2s;
}

/* effect 3 */

.hover3{
  position: relative;
  overflow: hidden;
  padding-bottom: 4px;
  display: inline-block;
}

.hover3:after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;

  position: absolute;
  left: 0;
  bottom: 0;

  transform: translate3d(-100%, 0, 0);
  transition: transform .2s ease-in;
}

.hover3:hover:after,
.hover3:focus:after{
  transform: translate3d(0, 0, 0);
}

/* effect 4 */

.hover4:hover .hover4__label,
.hover4:focus .hover4__label{
  transform: rotateX(360deg);
  transition: transform .4s ease-out, color .4s ease-out;
}

.hover4__label{
  display: inline-block;
  transform: rotateX(0);
  transform-origin: center bottom;
}

/* effect 5 */

.hover5{
  display: inline-block;
  position: relative;
}

.hover5:before{
  content: '' attr(data-hover-label) '';
  position: absolute;
  top: 0;
  transform: rotateX(90deg);
  transition: transform .1s linear;
}

.hover5:hover:before, .hover5:focus:before{
  transition-delay: .2s;
  transform: rotateX(0deg);
}

.hover5:hover .hover5__label, .hover5:focus .hover5__label{
  transform: rotateX(90deg);  
  transition-delay: 0s
}

.hover5__label{
  display: inline-block;
  transform: rotateX(0);
  transition: transform .1s linear .2s;
}

/* effect 6 */

.hover6:hover .hover6__label,
.hover6:focus .hover6__label{
  transform: rotateY(360deg);
  transition: transform .4s ease-out, color .4s ease-out;
}

.hover6__label{
  display: inline-block;
  transform: rotateY(0);
  transform-origin: left center;
}

/* effect 7 */

.hover7{
  display: inline-block;
}

.hover7:hover .hover7__label:after,
.hover7:focus .hover7__label:after{
  transform: translate3d(0, 0, 0);
}

.hover7__label{
  position: relative;
  overflow: hidden;
  padding-bottom: 4px;
  display: inline-block;
}

.hover7__label:after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;

  position: absolute;
  left: 0;
  bottom: 0;

  transform: translate3d(-70%, 0, 0);
  transition: transform .2s ease-in;
}

/* effect 8 */

.hover8{
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.hover8:after{
  content: "";
  width: 100%;
  height: 2px;

  position: absolute;
  left: 0;
  bottom: 0;

  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: transform .2s cubic-bezier(.84, .41, 0, 1.2), opacity .2s ease-out;
}

.hover8:hover:after, .hover8:focus:after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* effect 9 */

.hover9{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hover9:before, .hover9:after, .hover9__label:before, .hover9__label:after{
  content: "";
  position: absolute;
  transition: transform .2s ease-out;
}

.hover9:before, .hover9:after{
  width: 100%;
  height: 2px;
  left: 0;
}

.hover9:before{
  top: 0;
  transform: translate3d(-100%, 0, 0);
}

.hover9:after{
  bottom: 0;
  transform: translate3d(100%, 0, 0);
}

.hover9__label:before, .hover9__label:after{
  width: 2px;
  height: 100%;
  top: 0;
}

.hover9__label:before{
  left: 0;
  transform: translate3d(0, 100%, 0);
}

.hover9__label:after{
  right: 0;
  transform: translate3d(0, -100%, 0);
}

.hover9:hover:before, .hover9:hover:after,
.hover9:hover .hover9__label:before, .hover9:hover .hover9__label:after,
.hover9:focus:before, .hover9:focus:after,
.hover9:focus .hover9__label:before, .hover9:focus .hover9__label:after{
  transform: translate3d(0, 0, 0);
}

/* effect 10 */

.hover10{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hover10:before, .hover10:after, .hover10__label:before, .hover10__label:after{
  content: "";
  position: absolute;
  transition-property: transform;
  transition-duration: .1s;
  transition-timing-function: ease-out;
}

.hover10:before, .hover10:after{
  width: 100%;
  height: 2px;
  left: 0;
}

.hover10:before{
  top: 0;
  transform: translate3d(-105%, 0, 0);
  transition-delay: .25s;
}

.hover10:after{
  bottom: 0;
  transform: translate3d(105%, 0, 0);
  transition-delay: .05s;
}

.hover10__label:before, .hover10__label:after{
  width: 2px;
  height: 100%;
  top: 0;
}

.hover10__label:before{
  left: 0;
  transform: translate3d(0, 105%, 0);
}

.hover10__label:after{
  right: 0;
  transform: translate3d(0, -105%, 0);
  transition-delay: .15s;
}

.hover10:hover:before, .hover10:hover:after,
.hover10:hover .hover10__label:before, .hover10:hover .hover10__label:after,
.hover10:focus:before, .hover10:focus:after,
.hover10:focus .hover10__label:before, .hover10:focus .hover10__label:after{
  transform: translate3d(0, 0, 0);
  transition-duration: .2s;
}

.hover10:hover:before, .hover10:focus:before{
  transition-delay: 0s;
}

.hover10:hover:after, .hover10:focus:after{
  transition-delay: .4s;
}

.hover10:hover .hover10__label:after, .hover10:focus .hover10__label:after{
  transition-delay: .2s;
}

.hover10:hover .hover10__label:before, .hover10:focus .hover10__label:before{
  transition-delay: .6s;
}

/* effect 11 */

.hover11{
  position: relative;
  overflow: hidden;  
  display: inline-block;
}

.hover11:after{
  content: '' attr(data-hover-label) '';
  position: absolute;
  left: 0;
  top: 0;
  transition: transform .2s ease-in;
  transform: translate3d(140%, 0, 0);
}

.hover11__label{
  display: inline-block;
  transition: transform .2s ease-in;
}

.hover11:hover:after,
.hover11:focus:after{
  transform: translate3d(0, 0, 0);
}

.hover11:hover .hover11__label,
.hover11:focus .hover11__label{
  transform: translate3d(-140%, 0, 0);
}

/* effect 12 */

.hover12{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hover12:after{
  content: '' attr(data-hover-label) '';
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0, 140%, 0);
}

.hover12:after, .hover12__label{
  transition: transform .2s cubic-bezier(.86, .6, .08, 1.01);
}

.hover12__label{
  transform: translate3d(0, 0, 0);
  transition-delay: .15s;
  display: inline-block;
}

.hover12:hover:after, .hover12:focus:after{
  transform: translate3d(0, 0, 0);
  transition-duration: .3s;
  transition-delay: .1s;
}

.hover12:hover .hover12__label, .hover12:focus .hover12__label{
  transform: translate3d(0, 140%, 0);
  transition-duration: .3s;
  transition-delay: .1s;
}

/* effect 13 */

.hover13{
  position: relative;
  overflow: hidden;
}

.hover13, .hover13__label{
  display: inline-block;
}

.hover13:after{
  content: '' attr(data-hover-label) '';
  position: absolute;
  left: 0;
  top: 0;

  opacity: 0;
  transform: translate3d(0, 140%, 0);
  transition: transform .2s cubic-bezier(.86, .6, .08, 1.01), opacity .2s ease-in; 
}

.hover13:hover:after, .hover13:hover .hover13__label{
  transition-duration: .4s;
}

.hover13:hover:after, .hover13:focus:after{
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.hover13:hover .hover13__label, .hover13:focus .hover13__label{
  transform: translate3d(0, -140%, 0);
}

.hover13__label{
  transform: translate3d(0, 0, 0);
  transition-property: transform; 
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.86, .6, .08, 1.01);
}

/* effect 14 */

.hover14{
  position: relative;
  display: inline-block;
}

.hover14:after{
  content: '' attr(data-hover-label) '';
  position: absolute;
  left: 0;
  top: 0;

  opacity: 0;
  transform: scale(1.2);
  transition: transform .2s ease-out, opacity .2s ease-out; 
}

.hover14__label{
  display: inline-block;
  transition: transform .2s cubic-bezier(1, .04, 0, 1.18) .25s, opacity .15s cubic-bezier(1, .04, 0, 1.18) .25s;
}

.hover14:hover:after, .hover14:focus:after{
  opacity: 1;  
  transform: scale(1);
  transition-duration: .2s;
  transition-delay: .15s;
}

.hover14:hover .hover14__label, .hover14:focus .hover14__label{
  opacity: 0;
  transform: scale(0);
  transition-duration: .2s;
  transition-delay: 0s;
}

/* effect 15 */

.hover15{
  position: relative;
  overflow: hidden;  
  display: inline-block;
}

.hover15:before, .hover15:after{
  content: "";
  width: 50%;
  height: 100%;

  position: absolute;
  top: 0;

  opacity: 0;
  transition: transform .2s ease-out, opacity .2s ease-out;
}

.hover15:before{
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.hover15:after{
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.hover15__label{
  position: relative;
  z-index: 2;
}

.hover15:hover:before, .hover15:hover:after,
.hover15:focus:before, .hover15:focus:after{
  opacity: 1;
  transform: translate3d(0, 0, 0);  
}

/* effect 16 */

.hover16{
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.hover16:before, .hover16:after{
  content: "";
  width: 100%;
  height: 50%;

  opacity: 0;
  transition: transform .2s cubic-bezier(0.93,-0.06, 0.04, 1.07), opacity .2s ease-out;

  position: absolute;
  left: 0;
}

.hover16:before{
  top: 0;
  transform: translate3d(0, -50%, 0);
}

.hover16:after{
  bottom: 0;
  transform: translate3d(0, 50%, 0);
}

.hover16__label{
  position: relative;
  z-index: 2;
}

.hover16:hover:before, .hover16:hover:after,
.hover16:focus:before, .hover16:focus:after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-duration: .3s;
}

/* effect 17 */

.hover17{
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.hover17:before, .hover17:after{
  content: "";
  width: 51%;
  height: 100%;

  opacity: 0;
  transform: rotate(360deg);
  transition: opacity .2s ease-out;

  position: absolute;
  top: 0;
}

.hover17:before{
  left: 0;
}

.hover17:after{
  right: 0;
}

.hover17__label{
  position: relative;
  z-index: 2;
}

.hover17:hover:before, .hover17:hover:after,
.hover17:focus:before, .hover17:focus:after{
  opacity: 1;
  transform: rotate(0);
  transition: transform .3s cubic-bezier(0.93,-0.06, 0.04, 1.07), opacity .3s ease-out;
}

/* effect 18 */

.hover18{
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.hover18:after{
  content: '' attr(data-hover-label) '';
  width: 0;
  overflow: hidden;
  transition: width .2s ease-out;  

  position: absolute;
  left: 0;
  top: 0;
}

.hover18:hover:after, .hover18:focus:after{
  width: 100%  
}

/* effect 19 */

.hover19{
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.hover19:before, .hover19:after{
  content: "";
  width: 50%;
  height: 100%;

  position: absolute;
  top: 0;
  opacity: 0;
  
  transition: transform .2s ease-out, opacity .2s ease-out;    
}

.hover19:before{
  left: 0;
  transform: translate3d(-100%, 0, 0) rotate(-45deg);
}

.hover19:after{
  right: 0;
  transform: translate3d(100%, 0, 0) rotate(-45deg);
}

.hover19:hover:before, .hover19:hover:after,
.hover19:focus:before, .hover19:focus:after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease-out, opacity .3s ease-out;
}

.hover19__label{
  position: relative;
  z-index: 2;
}

/* effect 20 */

.hover20{
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.hover20:before, .hover20:after{
  content: "";
  width: 100%;
  height: 100%;

  opacity: 0;
  transition: transform .3s ease-out, opacity .3s ease-out;

  position: absolute;
  top: 0;
}

.hover20:before{
  left: 0;
  transform: translate3d(0, -100%, 0) scale(0);
}

.hover20:after{
  right: 0; 
  transform: translate3d(0, 100%, 0) scale(0);
}

.hover20__label{
  position: relative;
  z-index: 2;
}

.hover20:hover:before, .hover20:hover:after,
.hover20:focus:before, .hover20:focus:after{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hover1:focus, .hover2:focus, .hover3:focus, .hover4:focus, .hover5:focus,
.hover6:focus, .hover7:focus, .hover8:focus, .hover9:focus, .hover10:focus,
.hover11:focus, .hover12:focus, .hover13:focus, .hover14:focus, .hover15:focus, .hover16:focus, .hover17:focus, .hover18:focus, .hover19:focus, .hover20:focus{
  outline: none;
}

.hover2:before, .hover2:before, .hover4:hover, .hover4:focus,
.hover6:hover, .hover6:focus, .hover8:hover, .hover8:focus,
.hover10:hover, .hover10:focus, .hover12:after, .hover12:after,
.hover14:after, .hover18:after{
  color: #765b20;
}

.hover8:after, .hover9:before,
.hover9__label:after, .hover10:before,
.hover10:after, .hover10__label:before,
.hover10__label:after, .hover16:before,
.hover16:after, .hover20:before,
.hover20:after{
  background-color: #765b20;
}

.hover1:before, .hover1:after,
.hover1__label:before, .hover1__label:after,
.hover3:after, .hover7:hover .hover7__label:after,
.hover7:focus .hover7__label:after,
.hover9:after, .hover9:before,
.hover9__label:after, .hover9__label:before,
.hover15:before, .hover15:after,
.hover17:before, .hover17:after,
.hover19:before, .hover19:after{
  background-color: #1f675f;
}

.hover1:hover, .hover1:focus, .hover3:hover, .hover3:focus,
.hover5:before, .hover5:before, .hover7:hover, .hover7:focus,
.hover9:hover, .hover9:focus, .hover11:after,
.hover13:after{
  color: #1f675f;
}

.hover1, .hover9, .hover10, .hover15, .hover16, .hover17, .hover19, .hover20{
  padding: .5rem 1.5rem;
}

.hover7__label:after{
  background-color: #fff;
}

/*
* demo
*/

@media screen and (min-width: 769px){

  html{
    font-size: 62.5%;
  }
}

@media screen and (min-width: 641px) and (max-width: 768px){

  html{
    font-size: 56%;
  }
}

@media screen and (max-width: 640px){

  html{
    font-size: 50%;
  }
}

body{
  font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
  font-size: 1.6rem;
  color: #222;

  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

a{
  text-decoration: none;
  color: #795406;
}

.section{
  box-sizing: border-box;
  position: relative;
  padding: 7rem 2rem 5rem;
  text-align: center;
  background-color: #63A69F;
}

.section:nth-child(2n+2){
  background-color: #d5c093;
}

.title{
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0;
  background-color: #fff;
  padding: .5rem 1.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.footer{
  padding: 1rem 2rem;
  text-align: center;  
  font-size: 1.4rem;
  background-color: #ede6c7;  
}

@media screen and (min-width: 641px){

  .footer__container{
    display: flex;
    justify-content: space-between;
  }

  .melnik909{
    margin-left: 2rem;
  }  
}

@media screen and (max-width: 640px){

  .melnik909{
    display: none;
  } 
}

/*
* menu
*/

.menu{
  list-style: none;
  padding: 0;
  margin: 0;  
}

.menu__item{
  display: inline-block;
  margin-left: 5%;
  margin-right: 5%;
}

.menu__link{
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

@media screen and (min-width: 1201px){

  .main-container{
    display: flex;
    flex-wrap: wrap;
  }

  .section{
    width: 33.33333%;
  }
}


@media screen and (max-width: 640px){

  .melnik909{
    display: none;
  }
}

@media screen and (max-width: 300px){

  .menu{
    flex-direction: column;
  }
}
            
          
!
999px
Loading ..................

Console