Cosily

Aby uzyskać efekt, który opisujesz, trzeba zastosować odpowiednie style CSS, które zadziałają również w Internet Explorerze, gdzie obsługa niektórych właściwości jest ograniczona. Oto przykład kodu, który powinien spełnić Twoje oczekiwania, czyli brak widocznego bordera normalnie oraz jego kolorowanie w momencie najechania kursorem, bez przesuwania tekstu wokół:

„`html

.immagine {
border: 2px solid transparent; /* Ustawienie domyślnego bordera jako przejrzysty */
display: inline-block; /* Umożliwia utrzymanie wielkości i pozycji obrazu */
transition: border-color 0.3s ease; /* Płynna zmiana koloru bordera */
}

.immagine:hover {
border-color: red; /* Kolor bordera przy najechaniu */
}

/* Dla Internet Explorera */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.immagine {
border-color: transparent !important; /* Umożliwia ustawienie przejrzystego bordera na IE */
}
.immagine:hover {
border-color: red !important; /* Kolor bordera na hover */
}
}

Questo è un testo prima dell’immagine.

Questo è un testo dopo l’immagine.

„`

Wyjaśnienie kodu:

1. Brak widocznego bordera: Używamy border: 2px solid transparent; dla klasy .immagine, co sprawia, że obrazek ma niewidoczny border w normalnym stanie.

2. Kolorowanie na hover: Dzięki wykorzystaniu hover, zmieniamy kolor bordera na red po najechaniu kursorem. Użycie transition poprawia estetykę poprzez dodanie płynności do zmian.

3. Obsługa Internet Explorera: Dodany media query to „hack” dla Internet Explorera, który pozwala na zastosowanie ważniejszych stylów (!important). Dzięki temu border jest przejrzysty na IE, a na hover zmienia kolor na żądany.

Uwagi:

• Upewnij się, że ścieżka do obrazka (src="link-all-immagine.jpg") jest poprawna. Zmień ją na odpowiedni link do Twojego obrazka.
• Kolor na hover można dostosować do własnych potrzeb, zmieniając red na dowolny inny kolor.

Ten kod powinien spełnić wymagania dotyczące wyglądu i funkcjonalności w różnych przeglądarkach, w tym w IE.