Logoya mouse ile gelince bu şekilde nasıl hover efekti yaparım

[hebelehübele]

Merhabalar logoya gelince bu sitedeki gibi hover efekti nasıl yaparım gördüğünüzde reklam olmasın diye düzenlerseniz sevinirim

 

[admin]

Birebir aynısı olmasa da 2 adet birbirinden farklı olarak ayarladım ikisini de denersin hangisi hoşuna giderse artık.

Xenforo logo hover animasyon 1

.p-header-logo {
    position: relative;
    overflow: hidden;
   
    &:after {
        content: "";
        position: absolute;
        top: -50%;
        left: -60%;
        width: 20%;
        height: 200%;
        opacity: 0;
        transform: rotate(30deg);
       
        background: rgba(255, 255, 255, 0.13);
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.13) 77%,
            rgba(255, 255, 255, 0.5) 92%,
            rgba(255, 255, 255, 0.0) 100%
        );
    }
   
    &:hover {
        &:after {
            opacity: 1;
            left: 130%;
            transition-property: left, top, opacity;
            transition-duration: 0.7s, 0.7s, 0.15s;
            transition-timing-function: ease;
        }
    }
   
    &:active {
        &:after {
            opacity: 0;
        }
    }
}

Xenforo logo hover animasyon 2

.p-header-logo {
    position: relative;
    overflow: hidden;
    
    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
        );
        transition: all 650ms;
    }
    
    &:hover {
        &:before {
            left: 100%;
        }
    }
}

 

[hebelehübele]

Birebir aynısı olmasa da 2 adet birbirinden farklı olarak ayarladım ikisini de denersin hangisi hoşuna giderse artık.

Xenforo logo hover animasyon 1

.p-header-logo {
    position: relative;
    overflow: hidden;
  
    &:after {
        content: "";
        position: absolute;
        top: -50%;
        left: -60%;
        width: 20%;
        height: 200%;
        opacity: 0;
        transform: rotate(30deg);
      
        background: rgba(255, 255, 255, 0.13);
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.13) 77%,
            rgba(255, 255, 255, 0.5) 92%,
            rgba(255, 255, 255, 0.0) 100%
        );
    }
  
    &:hover {
        &:after {
            opacity: 1;
            left: 130%;
            transition-property: left, top, opacity;
            transition-duration: 0.7s, 0.7s, 0.15s;
            transition-timing-function: ease;
        }
    }
  
    &:active {
        &:after {
            opacity: 0;
        }
    }
}

Xenforo logo hover animasyon 2

.p-header-logo {
    position: relative;
    overflow: hidden;
   
    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
        );
        transition: all 650ms;
    }
   
    &:hover {
        &:before {
            left: 100%;
        }
    }
}

Extralesse mi ekliyorum acaba

 

[admin]

Extralesse mi ekliyorum acaba

Evet kullandığın temanın extra.less şablonuna eklemen gerekiyor.