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

Question

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 :)

Answer 1

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

Comments

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