CSS: nach dem Übergang (Hover)

I :after bin mit einem schwebt über Design zu schaffen (lange Geschichte, in WP mit VC) und ich versuche, nicht den :after CSS zu kennen zu verblassen in, wenn jemand schwebt über das anfängliche div. HierCSS: nach dem Übergang (Hover)

ist eine Geige - click here

Unten ist mein Ansatz:

.border-home:hover:after { 
    position: absolute; 
    top: 0%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url(http://i.imgur.com/3Si5tIy.png) 50% 50% no-repeat; 
    background-size: 190px 50px; 
    content: ''; 
    cursor: pointer; 
    background-color: rgba(127, 165, 61, 0.9); 
}

ich kämpfen werde, um den grünen Hintergrund zu machen und mehr Taste verblassen in glatt zu lesen.

Wie kann ich das erreichen?

Quelle

2016-11-20 Max

Wie wäre es eine Animation mit Keyframes? –

@Jojo Wie wäre es mit einem Übergang ohne Keyframes? ;) – connexo

@connexo Oh, ich dachte nicht an die Undurchsichtigkeit. Ich habe versucht, die Hintergrundfarbe direkt mit dem Übergang zu manipulieren und das hat nicht funktioniert. Also ich dachte, eine Animation wäre am besten. –

Fügen Sie einfach

.border-home::after { 
    transition: opacity 0.4s ease; 
    opacity: 0; 
} 

.border-home:hover::after { 
    opacity: 1; 
}

Quelle

2016-11-20 11:25:43 connexo

Vielen Dank! Ich hatte eine Weile damit zu kämpfen. – Max

Übergänge sind in CSS sehr einfach und komfortabel. – connexo

Yeap, connexo richtig ist, dann ist dies ein einfaches Beispiel auf Ihrem Code jsfiddle.

Zuerst müssen Sie Ihr Styling in :after (Hintergründe, Position etc.) und einige Übergangseigenschaften für Opazität setzen, und dann zeigen sie nur in :hover:after;)

Quelle

2016-11-20 11:39:16 codegaze

Vielen Dank auch für die Bereitstellung der Geige, um meinen Kopf herum zu bekommen! – Max

CSS: nach dem Übergang (Hover)

Antwort

Verwandte Themen