Pojawiający się obrazek po najechaniu kursorem myszy [CSS]

Czas czytania: 2 minut

Tym razem pokażę wam jak w bardzo prosty sposób uzyskać na stronie internetowej efekt obrazka pojawiającego się po najechaniu kursorem myszy na link. Inne podobne efekty aktywowane położeniem kursora myszy znajdziecie w serii :hover.

Prosty efekt pojawiającego się obrazka z pomocą CSS

Do stworzenia tego efektu poza wiedzą na temat tego jak działa :hover niezbędna będzie również znajomość pseudo elementów CSS. No dobrze jeśli jesteście gotowi przystępujemy do budowy efektu.

Budowę zacznę od utworzenia zwykłego linka, na który następnie nałożę efekt z obrazkiem. I tak:

Przykładowy link

<a class="show-img" href="#">Przykładowy link</a>

Jak widać w HTML to zwykły link z pewną klasą. Swoje właściwości zyskuje dzięki:

.show-img{
  position:relative;
}
.show-img:hover:after {
    content: url(https://www.aurainweb.pl/wp-content/uploads/2011/01/ie.jpg);
    display: block;
    position:absolute;
    left:0;
    z-index: 1000;
}

Może teraz trochę objaśnień:

Właściwie jeśli przeczytaliście wpisy, które podlinkowałam wcześniej to ich nie potrzebujecie. Praktycznie nie wprowadziłam nic nowego – ten efekt to dość ciekawe zastosowanie podstawowych elementów. Zachęcam więc do lektury.

A tak to wygląda w tekście.

See the Pen show img by Aura (@Julka85) on CodePen.

Analogiczny efekt można uzyskać z pomocą JavaScript lub jQuery. Jeśli wyrazicie zainteresowanie mogę przygotować również i taką wersję.

Efekt pojawiającego się obrazka z tekstem

Podnosząc trochę poprzeczkę do obrazka można dodać również tekst.

W tym przykładzie mamy 2 różne metody dodawania grafiki i tekstu. Pierwsza to dodanie obrazka i tekstu z pomocą CSS a druga z pomocą jQuery.

W wersji CSS tekst i obrazek możemy dodać tak samo jak wcześniej. Wprowadzamy jednak zmianę:

 content: url(https://www.aurainweb.pl/wp-content/uploads/2011/01/ie.jpg) "Some text";

---

W wersji z jQuery sprawa ma się już inaczej. Tutaj dodajemy grafikę i tekst z pomocą poniższego kodu:

$( ".show-img3" ).hover(
  function() {
    $( this ).append( $( "<span> <img src='https://www.aurainweb.pl/wp-content/uploads/2011/01/ie.jpg' /> <br>some text</span>" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);
 
$( ".show-img3.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});

W dużym skrócie kod ten powoduje, że po najechaniu kursorem myszy na obiekt z klasą „show-img3” zostaje za nim dodany:

<span> <img src='https://www.aurainweb.pl/wp-content/uploads/2011/01/ie.jpg' /> <br>some text</span>

A w monecie kiedy kursor myszy znajdzie się poza obiektem dodany „skrypt” powinien zniknąć. Usuwamy bowiem obiekt <span>

$( this ).find( "span" ).last().remove();

W kodzie HTML zmian praktycznie nie ma w stosunku do poprzednich przykładów, poza zmianą nazwy klasy. W CSS dodajemy

.show-img3 span{
   display: block;
    position:absolute;
    left:0;
    z-index: 1000;
}

Dzięki czemu pojawiający się element nie przesunie obiektów za sobą a będzie mógł wyświetlić się nad nimi.