Skocz do zawartości

Zwiększenie miniatury po najechaniu kursorem


artoroko

Recommended Posts

Poniżej zamieszczam kod, który przygotowałem. Chodzi o to, że po najechaniu myszką miniatury mają pozostać na swoim miejscu a duże zdjęcie ma się pojawić poniżej lub na wierzchu. W tej chwili działa tak, że po najechaniu kursorem na miniaturę duże zdjęcie rozpycha pozostałe miniatury. Jeśli ktoś ma pomysł to będę wdzięczny.
 
<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Tytuł strony</title>
<style>

body {
background-color: green;

}

.galeria {
width: 600px;
height: 500px;
position: relative;
margin: 0 auto;
border: 1px solid black;
}
.duze {
width: 600px;
height: 500px;

}

.miniatury span {
position: relative;
width: 120px;
height: 71px;
float: left;
display: block;
margin-right: 50px;
overflow: hidden;
}

.miniatury span:hover {
/*transition-duration:4s;*/
repeat: no-repeat;
width: 590px;
height: 350px;
border: 1px solid black;

display: block;
overflow: visible;
}

#m1 {
background-image: url("galeria/m1.jpg");

}

#m2 {
background-image: url("galeria/m2.jpg");

}

#m3 {
background-image: url("galeria/m3.jpg");

}

#m1:hover {
background-image: url("galeria/1.jpg");

}
#m2:hover {
background-image: url("galeria/2.jpg");

}
#m3:hover {
background-image: url("galeria/3.jpg");
}

</style>
</head>
<body>
<audio autoplay>
<!--<source type="audio/mpeg" src="bregovic.mp3" />-->
</audio>
<div class="galeria">
<div class="miniatury">
<span id="m1"></span>
<span id="m2"></span>
<span id="m3"></span>
</div>
<div class="duze" id="duze">

</div>

</div>

</body>
</html>

Link do komentarza
Udostępnij na innych stronach

  • 1 month later...
  • 2 weeks later...
  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...