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

Alternatywa dla "a href", powiększenie obrazka na którym jest tekst.

VPS Starter Arubacloud
0 głosów
650 wizyt
pytanie zadane 30 marca 2018 w HTML i CSS przez SZYMII Użytkownik (510 p.)
edycja 31 marca 2018 przez SZYMII

Dobry wieczór,

Jestem w trakcie tworzenia strony internetowej, lecz natrafiłem na problem z tego wynikający.

HTML

<div class="obrazy" onclick="link('ADRES')">
                            <div class="scale">
                                <div class="absolute">
                                    <ul>
                                        <li><h5>DTP od podstaw</h5><h6>Zasady przygotowania projektów do druku</h6><p>Szymon Kotarba <i class="icon-clock-1"></i> wto., 20.03.2012</p></li>
                                    </ul>
                                </div>
                                <div class="obraz"><img src="img/e12.jpg" alt="e12"/></div>
                            </div>
                        </div>

Css:

.scale:hover
{
	transform: scale(1.05);
	filter: brightness(1.4);
}

.scale
{
	width: 460px;
	height: 245px;
	transition: 0.3s all;
}

.obraz
{
	background-color: #01050d;
	width: 460px;
	height: 250px;
	position: absolute;
}

.obraz:before 
{
	background-color: #01050d;
    content:'';
    background: linear-gradient(0deg,rgba(1, 5, 13, 0.84) 0,rgba(1,5,13,0));
    width:100%;
    height:100%;
    position:absolute;
}

.obraz img
{
	background-color: #01050d;
	width: 460px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.absolute
{
	width: 460px;
	height:auto;
	top:150px;
	position: absolute;
	z-index: 1;
}
.absolute ul
{
	list-style-type: none;
	padding: 0px;
	position: absolute;
}

.absolute ul>li
{
	padding: 0px;
	margin: 0px;
}

.absolute ul>li a
{
	text-align: left;
	text-decoration: none;
	color: white;
	width: 100%;
	height: 100%;
	transition: all .3s;
	
}



.absolute ul>li h5
{
	font-family: Montserrat,sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-align: left;
	margin: 0px 0px 5px 23px;
	
}

.absolute ul>li h6
{
	font-size: 17px;
	line-height: 100%;
	text-align: left;
	margin: 0px 0px 5px 23px;
	font-family: 'Lora', serif;
	font-style: italic;
}

.absolute ul>li p
{
	font-size: 10px;
	line-height: 100%;
	text-align: left;
	margin: 8px 0px 5px 23px;
	font-family: Montserrat,sans-serif;
	font-weight: 400px;
	color: silver;
}

Wydaje mi się, że kod jest w całości.

Chciałbym, aby po najechaniu na zdjęcie powiększyło się, problem jest w tym, że na tym obrazku znajduje się tekst ("position: absolute;"). Udało mi się wrzucić obrazek wraz z tekstem do jednego diva i po najechaniu na tego diva obraz i tekst mi się powiększa.

Czy jest możliwość napisania poleceń w taki sposób, że jedynie obraz, mógłby się powiększać?

 https://imgur.com/sEwcEeq

Dla wizualizacji: https://imgur.com/3CTJdb7

Jeśli znacie odpowiedź na moje wyżej zadane pytania, śmiało proszę odpowiadać, wystarczającą pomocą będzie podanie linku do strony, na której problem został rozwiązany.

Bardzo dziękuje za wszystkie odpowiedzi :)

1 odpowiedź

+1 głos
odpowiedź 31 marca 2018 przez Tnifey Pasjonat (24,190 p.)
wybrane 12 kwietnia 2018 przez SZYMII
 
Najlepsza

mógłbyś, ale to nie jest eleganckie przypisać li onclick który wywołuje przejście do docelowej strony. od strony dostępowej byś mógł użyć chyba role="link"

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role

natomiast jeśli chodzi o powiększanie tekstu czy obrazka to na li:hover to załatwisz bez problemu

li:hover img lub li:hover div

komentarz 31 marca 2018 przez SZYMII Użytkownik (510 p.)

Onclick działa jak najbardziej, posłużyłem się komentarzem z innego forum:

http://forum.php.pl/csshtml_Div_jako_odnosnik_a_poprawnosc_i_obsluga_przez_przegladarki_t93194.html

Wiem, wiem nie jest to eleganckie, lecz niestety, jeśli chce mieć wyższą ocenę z projektu muszę posługiwać się do sprzędzenia poprawności strony validatorem.

Może jest jakiś lepszy sposób, może wykorzystać inne znaczniki niż <h1>,<p.> w <a href="">? (ale nie mam pomysłu jakie)

 

Co do powiększenia, bardziej chodziło mi o to, że jeśli najadę na obrazek to mi go powiększy, lecz problemem był tekst, który znajdował się na nim (poistion:absolute). Rozwiązałem to wrzucając do jednego diva tekst i obrazek (podczas najechania powiększa mi obrazek i tekst). https://imgur.com/sEwcEeq

Podobne pytania

0 głosów
1 odpowiedź 1,055 wizyt
pytanie zadane 25 września 2017 w HTML i CSS przez GracjanDogg Użytkownik (840 p.)
0 głosów
0 odpowiedzi 131 wizyt
pytanie zadane 14 stycznia 2018 w Offtop przez belkocik Początkujący (330 p.)
0 głosów
1 odpowiedź 115 wizyt

92,833 zapytań

141,777 odpowiedzi

320,824 komentarzy

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

...