Changing Image Link

[mjohnson92]

Hey, just curious if anyone knows the syntax for using css to change an image.

So let me explain.

I have a logo image that is a link back to the home page (index.html), link works great. I decided I want to change the color of the link when it's hovered. Since I am using a simple png logo I went into illustrator and changed the color. So now I have two images and I want the second image to replace the first when the cursor hovers over it. Still needs to be a link too.

Anyone know how to change image within css?

There is an example similar in here but it doesn't use two images. https://media-ed-online.github.io/intro-web-dev/modules/topic-08/psuedo-classes/

I don't think I'm using a correct link syntax or something in my .logo2index a:hover

[MarkLannen]

I tried this very thing with 2 images but could not get it to work. Will be interested if anyone has a solution!

[JonSwallow]

@mjohnson92 I tried the same thing with my arrow I had created two pictures in illustrator and they looked great. I could not get it to go either and ended up using a symbol instead of the pictures I created. Sorry I could not even figure this one out for myself and made a workaround.

[JustineEvansUM]

Hey you advanced gents @MarkLannenUM @JonSwallow @mjohnson92;

I created a video tutorial for this issue, which you can see here: https://vimeo.com/244114956

There are lots of ways to do this, and probably the easiest is to use a combination of display:, position:, and opacity:. Check it out!

[JonSwallow]

@JustineEvansUM Thanks, I will watch it. :)

[MarkLannen]

Thanks Justine - I will try this in the next project!