Enlarging images with CSS

Instead of calling a javascript, I’ve created a quick example script that uses CSS. 

Here’s the code I’ve added to the content editor web part (through the source editor):

//CSS to enlarge image on mouseover

<style type="text/css">

.enlargeleft:hover {float: left;}
a.enlargeleft:hover img {height: 120px;}
.enlarge:hover {}
a.enlarge:hover img {height: 120px;}

</style>

// hyperlink to example image calling the CSS class

<a href="#" class="enlargeleft">
<IMG height=65 hspace=6 src="<URL TO IMAGE>" align=left vspace=1 border=0>
</a>

This works by calling the class enlargeleft and should easily be scalable to any number of images within a page.

I’ve set the thumbnail image with a height of 65 pixels, and through the CSS the settings for the height are increased to 120 pixel.  You can obviously customise these to suit any given image.

Also, by adding "#" in the blank hyperlink, there is no waiting for the page to reload, just in case somebody accidentally clicks the image.  Naturally this can be replaced by a regular hyperlink if required.

<style type="text/css">

.growleft:hover {float: left;}
a.growleft:hover img {height: 120px;}
.grow:hover {}
a.grow:hover img {height: 120px;}

</style>

<a href="#" class="growleft">
<IMG height=65 hspace=6 src="<URL TO IMAGE>" align=left vspace=1 border=0>
</a>

Advertisements

One thought on “Enlarging images with CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s