Jednostavni hover efekt

January 31, 2022 | 2 minutes

Kako napraviti jednostavni CSS hover efekt?

Vjerojatno si više puta primijetio_la kako neke stranice bolje izgedaju od drugih. Počnimo s jednostavnim HTML&CSS kodom.

1
2
3


<div class="box">
    Hoverajte preko mene!
</div>

1
2
3
4
5
6
7
8


.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

Ovdje samo postavljamo osnovne postavke našeg boxa. Sad ćemo dodati pseudoelement after.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


.box::after {
    content: ''; /* Dodajte sadržaj za pseudoelement */
    position: absolute; /* Postavite poziciju na apsolutno */
    bottom: 0px; /* Zauzima punu širinu okvira */ 
    top: 0; /* Zauzima punu širinu okvira */ 
    right:0; /* Zauzima punu širinu okvira */ 
    left: 0; /* Zauzima punu širinu okvira */ 
    color: #fff; /* Boja teksta pseudoelementa */
    transform: translateX(-100%); /* pomičemo element za 100% njegove širine skroz ulijevo */
    padding: 10px; /* Ograda za pseudoelement */
    background-color: tomato;
    transition: transform .5s ease-in-out; /* dodajemo smooth efekt */
}

Sad ćemo koristiti cool selektor koji nam kaže kad hoveram box pomakni after pseudolement s početne pozicije, koja je bila -100% na X osi, prema 0% na X osi. Zapravo dajemo naredbu da se after element pomakne s -100% na 0%.

1
2
3


.box:hover::after {
  transform:translateX(0);
}

Konačno rješenje izgleda ovako:

See the Pen Untitled by Kodiraonica (@kodiraonica) on CodePen.

Kako napraviti jednostavni CSS hover efekt?

Evo još nekoliko izvora ako ne poznaješ pseudoelemente