Need to target just those images that are links

[Angelique]

I have the Modern Studio Pro theme.

On the front page of my website, there are four rows of images. I want a hover effect on the images that are links. I can't seem to isolate the right class for that.

Currently I have been able to give an effect to ALL of the images in the rows by using this code:

.column-row img:hover {
	border: 6px ridge #fbdd75;
}

How can I target JUST those images that are links? For the purpose of testing, the second image in the first row, the one that says "single location," is a link. The rest are not.

Note: The code above is not in my main style sheet. It's in a sheet called front-page.css.

http://itsolutionsbycmit.com

[Angelique]

Just wanted to say there's been one minor change to my code: Outline instead of Border (it stops the graphics from shrinking when hovered over.)

.column-row img:hover {
	outline: 6px ridge #fbdd75;
}

[Angelique]

Well, I figured out the answer. I can't remove my post, so I may as well share the answer in case anyone else needs to know it. All you have to do is create a new class. I named mine "highlight."

CSS:

.highlight {
	display:block;
}

.highlight:hover {
	outline: 6px ridge #fbdd75;
}

HTML:

<a class="highlight" href="http://theaddress.com"></a>

[Author]

Posts