• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Hover dla obrazka

Object Storage Arubacloud
0 głosów
1,027 wizyt
pytanie zadane 28 lutego 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)
zamknięte 1 marca 2017 przez bat_kuba
Witam prosiłbym o pomoc, nakierowanie mnie lub jakiś przykład jak zrobić hover z napisem na obrazku :).

Chodzi o to aby po najechaniu myszką na obrazek tło się zmieniło na dowolny kolor(o dowolnej przeźroczystości) oraz aby pojawiał się dodatkowo nieprzeźroczysty tekst.

O to co udało mi się uzyskać:

https://codepen.io/bat_kuba/pen/pejOJy

Nie wiem co zrobić aby pokazywał mi się jeszcze na tym tekst, który mógłbym modyfikować.

 

Z góry dziękuję za pomoc :)
komentarz zamknięcia: problem rozwiązany :)

1 odpowiedź

+1 głos
odpowiedź 1 marca 2017 przez pablop76 VIP (123,180 p.)
wybrane 1 marca 2017 przez bat_kuba
 
Najlepsza

Witam. Użyłbym pseudo elementu : after

<div class="oferta">
  <a href="#"><img src="http://www.national-geographic.pl/media/cache/default_view/uploads/media/default/0001/88/30623595ba2f6516f14e6587b3dfde83623b8fac.png" alt="golibroda"></a>
</div>
body{
  background-color: grey;
}
.oferta{
  display: block;
  width: 15%;
  position: relative;
}
.oferta img{
  display: block;
  width: 100%;
  height: auto;
}
.oferta:after{
  content:"JAKIS TEKST";
  background-color: rgba(188, 186, 186,.5);
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 22px;
  padding: 45% 25%; /*ustawia tekst w odpowiednim miejscu*/
  color: #890f0f;
}
.oferta:hover:after{
  display: block;
  cursor: pointer;
}

 

1
komentarz 1 marca 2017 przez jaca121212 Nałogowiec (40,760 p.)

Dorzucę swój przykład.

Link

komentarz 1 marca 2017 przez bat_kuba Użytkownik (600 p.)

dzięki wielkie za odpowiedź :) podoba mi się pierwszy efekt :)

miałbym jeszcze jedno pytanko czy mogę nadać kilku klasom naraz :hover ? np

.offer .of_1, .of_2, .of_3:hover{
  content:"JAKIS TEKST";
  background-color: rgba(122, 154, 119,.8);
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 40px;
  padding: 45% 10%;
  color: white;
}

 

Podobne pytania

0 głosów
2 odpowiedzi 853 wizyt
pytanie zadane 4 marca 2017 w HTML i CSS przez Daniel Kudyba Obywatel (1,260 p.)
+1 głos
1 odpowiedź 430 wizyt
pytanie zadane 15 maja 2018 w HTML i CSS przez Newaz Użytkownik (880 p.)
0 głosów
3 odpowiedzi 713 wizyt
pytanie zadane 8 marca 2016 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)

92,702 zapytań

141,615 odpowiedzi

320,180 komentarzy

62,061 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...