HTML/CSS image hover

Question

I want to create a simple image hover with AboutUsLink.png and AboutUsColourLink.png but I don't know how.

HTML:

<section class="link1">
    <a href="#SecondLink"><img src="images/LogoAndLinks/AboutUsLink.png"></a>
</section>

CSS:

.link1 {
    height: 100px;
    width: 100px;
    margin: auto;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    margin-top: 35%;
    margin-left: 22%;
    position: absolute;
    z-index: 1;
}

this is very basic. please ask to google first – Dinesh Kanivu Oct 27 '13 at 17:38 — Dinesh Kanivu, Oct 27 '13 at 17:38

zoranc · Answer 1 · 2013-10-27T20:08:40.977

1

For a CSS solution to this, set up your element like so:

<a href="#SecondLink"><div id="SecondLink"></div></a>

and then use the CSS to set the div background

#SecondLink {
    background-image: url('images/LogoAndLinks/AboutUsLink.png');
}

#SecondLink:hover {
    background-image: url('images/LogoAndLinks/AboutUsColourLink.png');
}

Take a look at this fiddle

edited Oct 27 '13 at 20:08

answered Oct 27 '13 at 17:34

zoranc

2,410
1
21
34

For some reason it doesn't work with my images but it works when I use let's say background-color:green; – Bartek Grzesiak Oct 27 '13 at 18:19
oh, the quotes were missing from the image path...look at the edited answer – zoranc Oct 27 '13 at 20:08
make sure you have the correct path to your image. The path will be relative to the file where you are using the CSS. – zoranc Oct 28 '13 at 02:10

score 0 · Answer 2 · answered Oct 27 '13 at 17:28

0

<section class="link1">
  <a href="#SecondLink">
     <img src="images/LogoAndLinks/AboutUsLink.png" 
          onmouseover="this.src='images/LogoAndLinks/AboutUsColourLink.png';" 
          onmouseout="this.src='images/LogoAndLinks/AboutUsLink.png';" />
  </a>
</section>

answered Oct 27 '13 at 17:28

Mikhail Timofeev

2,169
15
13

wouldn't recommend javascript in this instance. – codedude Oct 27 '13 at 21:35

HTML/CSS image hover

2 Answers2