Jak stworzyć napis na obrazku w CSS?

Hej! Jeśli próbujesz stworzyć coś fajnego na swojej stronie internetowej, na przykład napis na obrazku, to dobrze trafiłeś! Dzisiaj pokażę Ci, jak w CSS (i trochę w HTML) osiągnąć efekt napisu umieszczonego na obrazku. Nie martw się – nawet jeśli dopiero zaczynasz swoją przygodę z kodowaniem, wszystko będzie jasne! Zaczynamy!

Dlaczego napis na obrazku jest tak popularny?

Wiesz, pewnie zauważyłeś to na wielu stronach internetowych. Obrazek z napisem wygląda super, przyciąga uwagę i sprawia, że witryna jest bardziej angażująca. Używa się tego wszędzie – od banerów reklamowych, przez sekcje „O nas”, aż po portfolio czy sklepy internetowe.

Co więcej, dzięki CSS możesz kontrolować styl, pozycję i interakcje napisu – wszystko, czego potrzebujesz, by zrobić coś, co przyciągnie wzrok każdego.

Jak się za to zabrać?

Przejdziemy przez to krok po kroku. Pierwszym krokiem będzie przygotowanie prostego pliku HTML, a potem przejdziemy do CSS.

1. Przygotowanie struktury HTML

Najpierw musisz stworzyć prosty plik HTML. Wewnątrz umieścimy kontener z obrazkiem oraz tekstem.

Oto kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Napis na obrazku</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="image-container">
        <img src="twoj-obrazek.jpg" alt="Opis obrazka">
        <div class="overlay">
            <h1>Twój napis</h1>
        </div>
    </div>
</body>
</html>

Co tu się dzieje?

<div class="image-container"> – to główny kontener, który będzie trzymał obrazek i tekst.
<img> – obrazek, na którym pojawi się napis.
<div class="overlay"> – warstwa na obrazku, gdzie znajdzie się tekst.

Nie zapomnij podmienić twoj-obrazek.jpg na właściwą ścieżkę do swojego obrazka.

2. Stylizacja w CSS

Teraz zaczyna się magia! Otwórz plik style.css i wklej poniższy kod:

/* Stylizacja kontenera */
.image-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* Możesz dostosować do swoich potrzeb */
    margin: auto;
}

/* Obrazek */
.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* Warstwa na obrazku */
.image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Czarny z przezroczystością */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-family: Arial, sans-serif;
    text-align: center;
    opacity: 0; /* Domyślnie ukryte */
    transition: opacity 0.3s ease;
}

/* Efekt hover */
.image-container:hover .overlay {
    opacity: 1;
}

Wyjaśnijmy, co się tutaj dzieje:

.image-container – ustawia główny kontener jako relative, aby wszystkie elementy w środku mogły być ustawione w odpowiednich miejscach.
.overlay – to właśnie warstwa na obrazku. Dzięki position: absolute zajmuje całą przestrzeń nad obrazkiem. Tło ma lekko przezroczysty czarny kolor, a napis jest wyśrodkowany.
Efekt hover – dodaje efekt, w którym napis pojawia się dopiero po najechaniu myszką na obrazek.

3. Kilka fajnych trików

Trik 1: Animacja napisu

Jeśli chcesz, aby napis nie tylko się pojawiał, ale też wchodził z animacją, możesz dodać taki kod:

.image-container .overlay h1 {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.image-container:hover .overlay h1 {
    transform: translateY(0);
    opacity: 1;
}

W tym przypadku tekst delikatnie wsuwa się z dołu, co wygląda bardziej profesjonalnie.

Trik 2: Dopasowanie napisu do obrazka

Jeśli chcesz, aby napis wyglądał bardziej jak część obrazka, zamiast czarnego tła użyj gradientu. Zastąp background w .overlay takim kodem:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));

To doda fajny efekt przejścia kolorów od ciemniejszego na górze do jaśniejszego na dole.

Trik 3: Responsywność

A co, jeśli chcesz, żeby wszystko wyglądało dobrze na telefonach? Dodaj do CSS media queries:

@media (max-width: 768px) {
    .image-container .overlay h1 {
        font-size: 1.5rem;
        padding: 10px;
    }
}

Dzięki temu napis dostosuje swoją wielkość na mniejszych ekranach.

4. Testowanie i poprawki

To, co zrobiliśmy, działa w większości przeglądarek. Ale warto przetestować na różnych urządzeniach i ekranach. Pamiętaj, żeby sprawdzić, czy obrazek ładuje się poprawnie i czy napis jest dobrze widoczny.

Jeśli masz problemy z widocznością napisu na jasnych obrazkach, możesz spróbować bardziej kontrastowego koloru lub zmienić przezroczystość tła w .overlay.

I to wszystko! Dzięki CSS możesz w prosty sposób dodać napis na obrazku, który wygląda estetycznie i profesjonalnie. Cała magia polega na użyciu position: absolute oraz odpowiednich stylów, takich jak tło z przezroczystością czy efekt hover.

Jeśli dopiero zaczynasz swoją przygodę z kodowaniem, to świetny sposób na naukę podstaw CSS i eksperymentowanie z różnymi stylami. A jeśli masz już doświadczenie, możesz dostosować ten kod do bardziej zaawansowanych projektów.