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

:hover:before Jak uwidocznić na urządzeniach mobilnych

Object Storage Arubacloud
0 głosów
798 wizyt
pytanie zadane 10 kwietnia 2017 w HTML i CSS przez memory158 Nowicjusz (160 p.)

Witam, posiadam na swojej stronie klasę, w której znajduje się  obrazek. Po najechaniu na ten obrazek pojawia się napis, który jest hiperłączem i  półprzezroczyste tło na obrazku. Chciałabym aby na urządzeniach mobilnych, telefonie i tablecie, te efekty były od razu widoczne a nie tylko po najechaniu na nie.

Niestety nie wpadłam na żadne rozwiązanie. Z góry bardzo dziękuję za odpowiedzi :) 

 

<div class="mp1"> 
	            	<a href="#" data-title="Tekst " class="a-img">
	            		<img src="images/gray.jpg" class="img2" alt=""/>
	            	</a>
	            </div>
.mp1 {
    width: 50%; 
    height: 45%;
    float: left;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;
    padding: 20px;
}

.img2 {
    margin-top: 0;
    height: 100%;
    width: 100%;
}

.a-img {
    height: 100%;
    width: 100%;
    position: relative;
    display: inline-block;
}

.a-img:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.25s ease-in;
    background: rgba(0, 0, 0, 0.6);
    content: attr(data-title);
    padding: 24% 5% 0;
    font-size: 24px;
    text-align: center;
    color: white;
}

.a-img:hover:before { opacity: 1; }

Poniżej obrazki przedstawiające dodany efekt. 

2 odpowiedzi

0 głosów
odpowiedź 10 kwietnia 2017 przez prominepl Bywalec (2,440 p.)
Strony mobilne mają to do siebie że hover jest tam bardzo niepraktyczny. Dlatego tworząc strone responsywna zawsze kierujmy się zasadą mobile first. I teraz pojawia się pytanie czy łatwiej bedzie ci poprawić stronę tak aby psowała do wszystkich urządzen, czy po porstu stworzysz strone mobilna, dedykowana tylko dla urzadzen mobilnych
komentarz 10 kwietnia 2017 przez memory158 Nowicjusz (160 p.)
Nie da się zrobić żeby na komputerach ta animacja działała a na urządzeniach mobilnych była wyłączona i od razu by to było widoczne bez potrzeby najeżdżania czy klikania w obrazek ? Nie wiem dobrze wyjaśniłam to o co mi chodzi.
0 głosów
odpowiedź 10 kwietnia 2017 przez pablop76 VIP (123,180 p.)

Witam.

@media only screen and (max-width: breakpoint) {
    .a-img:before {
    opacity: 1;
     }
}

Zamiast breakpoint ustaw szerokość w px poniżej której ma się zmienić opacity.

komentarz 10 kwietnia 2017 przez memory158 Nowicjusz (160 p.)

Działa, super, bardzo dziękuję ! laugh

komentarz 10 kwietnia 2017 przez pablop76 VIP (123,180 p.)
Aby projektować strony na RWD zapoznaj sie koniecznie z media queries.

Podobne pytania

0 głosów
2 odpowiedzi 558 wizyt
pytanie zadane 18 września 2016 w HTML i CSS przez Wookiee Użytkownik (980 p.)
0 głosów
0 odpowiedzi 480 wizyt
0 głosów
1 odpowiedź 137 wizyt

92,694 zapytań

141,606 odpowiedzi

320,106 komentarzy

62,051 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!

...