Als je gedeelten van afbeeldingen uitvergroot wilt hebben kan je dit "css-vergrootglas" gebruiken. Het voordeel van CSS is, dat bezoekers, die geen javascript ingeschakeld hebben, tóch dit vergrotings-effect kunnen gebruiken. Toch raad ik jou aan om de robuuste javascript variant van de magnifier op jouw website te gebruiken. Dit voorbeeld staat alleen op de pagina om jou ideëen te geven over de mogelijkheden van wat met CSS allemaal mogelijk is. Plaats achtereenvolgens de html-code in de body- en de stylsheet in de head-sectie van jouw pagina. De stylesheet is zo duidelijk als mogelijk gemaakt; dus het zou eenvoudig moeten zijn om de positie, en grootte, van de kaders en (b.v.) de dikte van de lijnen in te stellen.
<dl id="magnifier">
<dt>
<a id="afbeelding" href="#"></a>
</dt>
<dd id="hoofd">
<a id="link_hoofd" href="#">
<b></b>
<span>
<img src="hoofd.jpg" alt="hoofd - close-up" />
</span>
</a>
</dd>
<dd id="hoofd_doel">
<a id="link_hoofd_doel" href="#">
<b></b>
<span>
<img src="hoofd-doel.jpg" alt="hoofd_doel - close-up" />
</span>
</a>
</dd>
</dl>
<style type="text/css">
#magnifier{
display:block;
width:220px;
height:330px;
background:url(magnifier-image.jpg) no-repeat;
position:relative}
#magnifier a span,#magnifier a:visited span,#magnifier a b{
display:none}
#magnifier dd{
position:absolute;
padding:0;
margin:0}
#magnifier #hoofd{
left:50px;
top:40px;
z-index:2}
#magnifier #hoofd_doel{
left:90px;
top:200px;
z-index:2}
#magnifier a#link_hoofd{
display:block;
width:120px;
height:120px;
text-decoration:none;
z-index:2}
#magnifier a#link_hoofd_doel{
display:block;
width:120px;
height:100px;
text-decoration:none;
z-index:2}
#magnifier a#link_hoofd:hover,#magnifier a#link_hoofd_doel:hover{
border:3px solid #ccccff}
#magnifier a:hover span{
position:absolute;
display:block}
#magnifier a#link_hoofd:hover span{
left:290px;
top:-50px}
#magnifier a#link_hoofd_doel:hover span{
left:200px;
top:-80px}
#magnifier a#link_hoofd:hover b{
position:absolute;
display:block;
left:120px;
top:30px;
width:250px;
height:6px;
overflow:hidden;
font-size:1px;
background:#ccccff;
color:inherit}
#magnifier a#link_hoofd_doel:hover b{
position:absolute;
display:block;
left:124px;
top:35px;
width:140px;
height:6px;
overflow:hidden;
font-size:1px;
background:#ccccff;
color:inherit}
#magnifier a:hover span img{
float:left;
margin-right:1em;
margin-bottom:0.5em;
border:4px solid #ccccff}
</style>