Semitransparent overlay med hover for thumbnail

lokeland · 17. mai 2008

Jeg lager en liten galleriside for tida og jeg ønsker å ha en semitransparent overlay over thumbnailene som forsvinner når jeg beveger pusepekeren over. Jeg har prøvd en stund å få det til, men jeg har nå skjønt at jeg ikke kommer til å få det til.

Er det noen som vet hvordan jeg gjør dette?

Jeg lurer også på om noen har en teknikk for å få footeren til å holde seg på bunnen, uten at jeg får scrollbars. De teknikkene jeg har prøvd gjør at scrollbaren dukker opp igjen, på tross av at jeg bruker overflow: auto i body i CSS.

Endret 17. mai 2008 av Glisevask

Jonas · 18. mai 2008

Footer som alltid holder seg på bunn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

	<style type="text/css">

		#wrapper {
			width: 400px;
			margin: 0px auto 51px auto;
		}

		#nice-footer {
			width: 100%;
			left: 0;
			bottom: 0;
			position: fixed;
			background: #000000;
		}

			#nice-footer p {
				color: #ffffff;
			}

	</style>

</head>

<body>

	<div id="wrapper">

		<h1>Test</h1>

		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim, tortor ac scelerisque aliquet, tortor tellus posuere turpis, non mattis odio arcu rhoncus justo. Vivamus venenatis ligula ac felis. Nam laoreet nunc non nisl. Aenean dictum viverra enim. Suspendisse at velit eleifend urna pulvinar adipiscing. Ut sed risus. Maecenas molestie, elit vel placerat mollis, erat ipsum euismod velit, et bibendum metus purus vitae tortor. Vivamus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sed mauris. Integer pede augue, pharetra egestas, posuere in, accumsan ultrices, lorem. Nulla mi leo, lobortis id, pellentesque vitae, congue quis, sem. Pellentesque quis libero. Nam tempus lectus non ipsum. Proin blandit semper arcu. Nam quam risus, fringilla et, vestibulum sit amet, sagittis nec, mi. Praesent quis quam.</p>
		<p>Cras auctor aliquet eros. Nullam non sapien. Praesent iaculis, dolor in posuere euismod, nunc nisl vestibulum sem, vel cursus ipsum velit at odio. Duis auctor mi eu lacus. Nulla tristique. Sed nec nibh. Sed a metus et est semper blandit. Suspendisse blandit, pede quis pellentesque tempus, odio nulla sodales purus, eget posuere justo metus in ante. Aliquam a nulla id arcu consequat facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent et nisi et pede eleifend tristique. Sed tortor orci, faucibus sit amet, rutrum nec, rutrum at, nibh. Cras vel eros. Vivamus nisl justo, ultrices at, convallis eu, posuere nec, mi. Vivamus malesuada enim sed lorem. Mauris ut dolor ac ante faucibus congue.</p>
		<p>Duis tempor fermentum libero. Integer cursus nulla at leo. Pellentesque fringilla, odio eget ornare vestibulum, eros nisi scelerisque libero, in pulvinar ipsum justo id justo. Aliquam ultrices lectus. Vivamus id turpis. Maecenas tincidunt. Donec eros. Duis tristique tortor in mi. Nunc nunc. Mauris leo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dui ligula, iaculis ut, laoreet nec, ultricies id, libero. In tincidunt, magna a dictum feugiat, diam ligula aliquet neque, sed consequat turpis eros ac risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vel purus tincidunt nunc tristique porttitor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ultrices auctor velit. Vestibulum lacinia.</p>
		<p>Ut augue. Pellentesque risus mi, aliquam quis, bibendum at, hendrerit a, nisl. Mauris feugiat, est ac dictum malesuada, augue neque sodales arcu, et dictum sem nunc in quam. Proin sem sapien, ultricies vitae, pellentesque quis, ullamcorper eu, mi. Aliquam erat volutpat. Nam lobortis, tellus sit amet venenatis commodo, tellus neque auctor metus, non convallis massa lorem et magna. Phasellus non lectus tincidunt mi molestie placerat. Nam ac turpis. Vestibulum ut est sit amet diam condimentum malesuada. Maecenas aliquet elementum mauris. Nullam quis erat. Duis condimentum ultricies nibh. Suspendisse potenti. Cras risus tortor, pulvinar a, ullamcorper in, lacinia dictum, metus. Curabitur eget diam ac orci lobortis faucibus.</p>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras tincidunt. Aliquam vulputate viverra erat. Nullam purus tortor, feugiat sed, faucibus sit amet, iaculis nec, nisi. Sed est enim, mattis id, blandit ultricies, rhoncus cursus, leo. Maecenas vulputate orci id turpis. Morbi euismod orci quis ipsum. Maecenas nibh. Aenean egestas mattis nulla. Aenean vestibulum augue id est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ornare suscipit justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec leo. Duis nulla nibh, convallis ut, ullamcorper sed, vestibulum ac, enim. Nulla adipiscing nisl sit amet libero. Donec quis pede quis quam lobortis consequat. Aliquam felis velit, tristique ut, egestas placerat, vestibulum vitae, ante. Quisque viverra mauris quis quam.</p>

	</div>

	<div id="nice-footer">

		<p>Made by Ola Nordmann</p>

	</div>

</body>

</html>

Semitransparent overlay over thumbnails

Noe stygg måte å gjøre det på, men men .. Eksempel her.

Ikke egentlig noe overlay, men du ender opp med omtrentlig samme effekt, dersom det var noe slikt du tenkte på.

HTML

<a href="#" class="dark_image"><img src="http://.." alt="" /></a>

CSS

.dark_image img {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

.dark_image:hover img {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

Endret 18. mai 2008 av Jonas

lokeland · 18. mai 2008

Tusen takk!

Får dessverre ikke prøvd ut footer-trikset fordi wrapperen ikke vil strekke seg helt ned: http://mkgalla.kihlmedia.no/

Jeg må bare legge til at koden er forferdelig stygg, men weblærern min vet ikke hva CSS er, så det skulle gå fint!

Flytta den transperente hvite bakgrunnen til #innhold, istedenfor å ha den i #wrapper, men alikevel vil den ikke strekke seg ned.

Merk at jeg har ikke sett siden i verken FF eller Opera, siden kravet er at den bare skal være kompatibel med IE6, som vi bruker på skolen.

Tar denne videre i ny tråd jeg.

Endret 18. mai 2008 av Glisevask

Logg inn

Semitransparent overlay med hover for thumbnail

Anbefalte innlegg

lokeland

Lenke til kommentar

Videoannonse

Jonas

Lenke til kommentar

lokeland

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer