Einen cooler Fokus Text / Titel mit CSS – Webdesign Idee

Wenn man an einer Webseite rumprogrammiert ist man immer wieder auf der Suche nach einer coolen Idee mit der man die Aufmerksam der Webseitenbesucher / Kunden fesseln kann. Meistens reicht es schon wenn man kleine Effekte einbaut.

Heute möchte ich euch mal ein Titel Effekt zeigen, der wirklich sehr einfach aufgebaut ist, aber sehr viel Aufmerksamkeit erzeugt.

Und zwar zeige ich euch ein Effekt mit dem ihr Buchstaben bei Hover Status klar machen könnt – ihr versteht gleich was ich meine

Video

HTML

<h2>
        <span>E</span>
        <span>R</span>
        <span>I</span>
        <span>C</span>
        <span>-</span>
        <span>O</span>
        <span>L</span>
        <span>I</span>
        <span>V</span>
        <span>E</span>
        <span>R</span>
    </h2>

CSS

h2 {
    position: relative;
    display: flex;
    gap: 10px;
    color: #fff;
    font-size: 6rem;
    cursor: pointer;
}

h2 span {
    position: relative;
    padding: 0 5px;
    filter: blur(10px);
    transition: 500ms;
    -webkit-text-stroke: 2px #000;

}

h2 span:hover {
    filter: blur(0px);
    transition: 0s;
}