KOMPOOS.NL

spotlight image CSS

home » css » image-effects » spotlight-image.html

uitleg image spotlight procedure

Ga eerst met jouw muis naar de rechterkant van de pagina...
Alle browsers maken het "spotlight-venster", alleen IE krijgt het niet voor elkaar om een ronde spotlight te tonen. Alle andere browsers hebben hier geen probleem mee. Hieronder de css-code:

de stylesheet voor de spotlight image


<style type="text/css">
	.spotlight{
		position:absolute;
		width:340px;
		top:0;
		right:0}
	.spotlight b{
		position:absolute;
		background:url(http://static.dns5.nl/css-spotlight.jpg) no-repeat fixed;
		background-position:right top}
	.spotlight p{
		float:left;
		width:30px;
		height:30px;
		position:relative;
		margin:0}
	.spotlight p:hover b{
		position:absolute;
		width:150px;
		height:150px;
		border:#808080 2px solid;
		border-radius:150px;
		-moz-border-radius:50%;
		-khtml-border-radius:50%;
		-webkit-border-radius:50%;}
</style>
<!--[if IE]>
	<style type="text/css">
		body{position:absolute;margin:21px 0 0 8px}
	</style>
<![endif]-->

maak een container-div voor de spotlight

Maak een div met de class "spotlight". Vul de div met een paar honderd <p><b></b></p>
(kijk als je het niet snapt even in de broncode van deze pagina hoe alles gedaan is). De hoeveelheid van de b en p's is afhankelijk van de grootte van jouw afbeelding. Gewoon proberen hoeveel je nodig hebt. Hieronder staat nog wat code om IE een iets betere performance te geven.

code die je vóór het <!DOCTYPE> moet plaatsen


<!--[if IE]>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v">
<![endif]-->

code die direct ná de head-tag geplaatst moet worden


<!--[if IE]>
	<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->