2

Following on from parts 1, 2 and 3 we shall now start looking into image hovering. By this I mean what happens to an image when you hover over it for instances where you may have placed and image for a link within post content.

We shall investigate how to code for such events and after that I will provide some nice border hover effects I’ve found over the last year for you to implement with ease onto your site.

We shall begin this tutorial by focusing our attention back to the Cascade Style Sheet (CSS) and start to look at firstly how we can define specific attributes and styles just to a link and then go onto look at the hover function within CSS.

Link Styling

If that last paragraph made very little sense don’t worry, lets start from the bottom and work our way up.

CSS allows us to code specific styles for link elements. So for example if we have black text and we wanted any links within that text to appear in blue we would use CSS to style these.

This is an example of what styling a link in CSS would look like.

.post-text { color:#000; }
a .post-text ( color:#5c94b8; )

That is an example of the CSS code used to give black text with text links showing as a light blue.

Note that the “a” is the command for links in css as it is in hmtl. In html <a href=”your url”></a> is a link. In CSS we can style that link by just using “a” as u can see in the CSS code above.

To implement this into the website we would use a <div></div> or a <span></span> object as follows

<div class=”post-text”></div>

Now, take a step back and you will notice that we have not defined the “post-text a” class anywhere in the <div> code. But the fact is we don’t have to apply this. “post-text a” is a style that is only attributed to links within “post-text” so we don’t need to define it as a class.

This is an example of what will be shown

Here is a section of text with links that are blue

Hover Styling

Now that we understand how to style links within a div we will now move on to look at how to style objects for hovering.

For those that are not sure what is meant by hovering place your cursor (or mouse) over the “Recent Comments” or “Categories” found in the sidebar for an example.

Right, now you can see that for hovering we will need to create a different set of styles for the link so that when we hover over the object the styles change to give us something that looks different, but then reverts to it’s normal style when we move away.

This time we will have black text, with blue links that turns red when you hover over them..

This is done using the following code

.post-text { color:#000; }
a .post-text  ( color:#5c94b8; )
a:hover .post-text  { color:#d54e21; }

Now you should be able to guess how we define this to a div element

<div class=”post-text”></div>

On To The Images

Now we’ve explained the CSS and div coding behind links and hovers lets move onto the images. (I apologise for the lengthy section on text but its easier to understand in very simple terms). We are now going to take an image and apply the same styling effects to it. Using the methods described above.

In Part 3 we got as far as adding classes to the image to give the appearance of a border. From this part lets take Example 5 and add a hover effect to those images that are links, but leave images that are not links with the just the border and no hover effect.

This is an example of what we are aiming to achieve:

Left = No Link
Right = Linked Image

A nice red hover effect only when the image is a link.

To do this we need to make a few new classes.

This is what classes we had in part 3

.imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc; background:#f0f6fb;}
.floatleft {float:left;}
.floatright {float:right;}

Lets look at these and take these forward to get the styling effect we are after.

Now you can see that we need to add a style for the link (a) and then a hover effect for those images that are links (a:hover).

As you can see we want the same bordered effect for both the normal image and the linked image (when we are not hovering over the image with the mouse). So the linked image style (a) is going to be the same as the normal image style.

.imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc; background:#f0f6fb;}
a .imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc; background:#f0f6fb;}

Now we want to style the hover effect for images that are links.

This can be done using a:hover (a = link, hover = only when object is hovered)

We want a nice red coloured background using the hex colour #d54e21

So we now need to just change the colouring of the border ( border: colour; )and the background ( background: colour; ) elements from what is there.

a:hover .imagestyle {border: 1px solid #d54e21; background:#d54e21;}

Note: We cannot remove the border as the size of the image will change because borders add 2px (1pixel each side) to the size of your image. Also you may notice that the line of code above does not contain the margin ( margin: size ; ) or padding ( padding: size : ) styles. This is ok as the a .imagestyle will retain these values and that we only need to define things that will change on hovering and the padding and margins are not going to change.

Final Code

These are our classes

.imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc; background:#f0f6fb;}
a .imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc; background:#f0f6fb;}
a:hover .imagestyle {border: 1px solid #d54e21; background:#d54e21;}
.floatleft {float:left;}
.floatright {float:right;}

And this would be our final image code (floated left and right respectively) as in Part 3

<img src=”image url” class=”floatleft imagestyle” alt=”">

<img src=”image url” class=”floatright imagestyle” alt=”">

For thsoe that were wondering, the img code has not changed in the slightest which is why classes are so easy and efficient to use.

More Hover Styles

Here is one more great looking image hover style for you to choose from.

Classes:
.imagestyle {margin:0 8px 8px 8px; padding:6px; border: 1px solid #dddddd; background:#f3f8fc;}
a .imagestyle {margin:0 8px 8px 8px; padding:6px; border: 1px solid #ddddddd; background:#f3f8fc;}
a:hover .imagestyle {border: 1px solid #64b2d8; background:#64b2d8;}
.floatleft {float:left;}
.floatright {float:right;}

Image:
class=”imagestyle floatleft” OR
class=”imagestyle floatright”

Final Word

Well guys that brings us to the end of our series “How To Style Images”, we hope you’ve enjoyed reading these posts and more importantly that you’ve understood what’s going on

We hope you can now take these skills forward and develop your own colour co-ordinations

Best of luck, Blog2Life

If you have any questions or need help troubleshooting then leave a comment and we will see what we can do for you

Trackbacks

Leave a reply...

Name (required)
Mail (will not be published) (required)
Website