Obrazek zmienia się w linki po najechaniu myszką CSS i HTML

pytanie zadane 11 września 2016 w HTML i CSS przez Rafik Obywatel (1,870 p.)

Witam

Chcę zrobić efekt w którym po najechaniu na obrazek zamiast niego wyświetli się inny, a na nim linki do przejścia na kolejne podstrony.

Chodzi mi o efekt zastosowany na stronie www.otodom.pl ( jak się zjedzie na dół jest tam dział "w otodom znajdziesz" i tam jest zastosowany taki efekt po najechaniu na grafikę). Próbowałem robić z hoverem w css podmieniając tło diva ale coś mi nie wychodziło. Dodatkowo chciałbym żeby pod obrazkiem był podpis (podobnie jak na otodom) i także po najechaniu na ten napis grafika też się zmieniała. Nie wiem czy ma to znaczenie ale obrazek będzie okrągły. Wydaje mi się że jest to w pełni do zrobienia w HMTL i CSS.

PS widziałem podobne wpisy na tym forum ale żaden nie rozwiązywał mojego problemu.

4 odpowiedzi

odpowiedź 11 września 2016 przez Rafik Obywatel (1,870 p.)
wybrane 11 września 2016 przez Rafik

Najlepsza

99% problemu już rozwiązałem pozostała mi tylko kwestia podpisu pod obrazkiem. Kiedy po najechaniu na obrazek ten się podmienia i linki się pojawiają to wszystko gra. Jak jednak zabiorę kursor to napis przesuwa się na środek obrazka, a wolałbym żeby cały czas był pod obrazkiem oto kod:

HTML :

<a href="#"><div class="filmy">
                	<ol>
                    	<li><a href="#1"><b>komedie</b></a></li>
                        <li><a href="#2"><b>dokumentalne</b></a></li>
                    </ol>
	                <div class="podpis">Filmy</div></div></a>

i CSS:

.podpis
{
	margin-top:70px;
	color:#2c3e50;
}


ol
{
	padding:0;
	margin:0;
	list-style-type:none;
	text-align:center;
	margin-top:50px;
	line-height: 40px;
	display:none;
}

ol a
{
	color:#ffffff;
	font-family: 'Roboto', sans-serif;
	text-decoration:none;\
}

.filmy
{
	width:200px;
	height:200px;
	padding-top:10px;
	padding-bottom:20px;
	float:left;
	margin-right:40px;
	text-align:center;
	text-decoration:none;
	font-family: 'Roboto', sans-serif;
	background-image:url(images/film.png);
	background-repeat:no-repeat;
}


.filmy:hover
{
	background-image:url(images/tlo.png);	
}
.filmy:hover > ol 
{
	display:block;
}

komentarz 11 września 2016 przez Czort Nałogowiec (32,500 p.)

Tutaj najlepiej manipulować pozycją elementów, np. position relative albo absolute dla klasy podpis i zmieniasz właściwość top aby uzyskać pożądany efekt.

Tutaj małe demo twojego kodu lekko zmodyfikowanego: https://jsfiddle.net/2qznrj1c/1/. Na pewno da się to rozwiązać lepiej ale powinno dać Ci to ogólny zarys o co chodzi.

komentarz 11 września 2016 przez Rafik Obywatel (1,870 p.)

Śmiga jak powinno :) Dzięki

odpowiedź 11 września 2016 przez mitelak Pasjonat (23,330 p.)

Do tego spokojnie wystarczyć powinna Ci wiedza na temat pseudoselektorów :hover oraz :after ;) Z czym masz konkretnie problem, co już zrobiłeś?

komentarz 11 września 2016 przez Rafik Obywatel (1,870 p.)

Po 1 jak najlepiej wstawić obrazek czy normalnie w HTML czy w CSS ustawić jako tło i później :hover podmiana na inne, ale wtedy mam problem z podpisem bo ten ustawia się na środku obrazka, a nie pod spodem a, <br /> nie wchodzi w grę dlatego, że obok chce przykleić kolejny obrazek (float:left wtedy nie zadziała poprawnie bo ustawia kolejny obrazek obok podpisu) . Ogólnie w rzędzie mają być 3 i pod każdym podpis.

odpowiedź 11 września 2016 przez jonatan Początkujący (320 p.)

odpowiedź 11 września 2016 przez CzikaCarry Szeryf (75,340 p.)

So hard?

http://codepen.io/anon/pen/KgdBWb

komentarz 11 września 2016 przez Rafik Obywatel (1,870 p.)

A co z podpisem pod obrazkiem na który ma również reagować grafika po najechaniu ?

komentarz 11 września 2016 przez CzikaCarry Szeryf (75,340 p.)

no to dodajesz jeszcze jedno hiperłącze i robisz podobnie jak z tymi obrazkami.

komentarz 11 września 2016 przez Rafik Obywatel (1,870 p.)

Chyba mnie do końca nie zrozumiałeś. Podpis pod obrazkiem ma się nie zmieniać. Ma się po najechaniu na podpis lub grafikę podmienić obrazek i pojawić 2-3 nowe linki. W rzędzie mają być 3 obrazki używam do tego funkcji float:left w css więc <br /> z obniżaniem podpisu odpadają. Nie wiem czy zajrzałeś na stronę otodom.pl którą podałem bo chce właśnie uzyskać identyczny efekt jak tam jest.

komentarz 11 września 2016 przez CzikaCarry Szeryf (75,340 p.)

Tak, zajrzałem na tą stronę, i podałem Ci przykład, jak zrobić jeden taki obrazek. A to, że nie umiesz napisać jednego dodatkowego hiperłącza, skopiować tego diva 8 razy i go zaokrąglić, to już nie mój problem. Nie powinieneś mnie obwiniać o owoce twojego lenistwa.