0

Considering logo is more like content (than decoration) on a webpage, I find this markup suitable for my website:

<h1 id="logo">
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow">
  </a>
</h1>

Given the case, how should I go about creating a rollover/hover effect such that a different logo image is displayed on hover? (E.g. the actual logo is black-and-white; on hover, the colorful logo image is shown.)

Doing something like this feels stupid (but I have no better ideas in mind):

HTML:

<h1 id="logo">
  <a href="http://stackoverflow.com">
    <img id="logo-img1" src="logo1.png" alt="Stack Overflow">
    <img id="logo-img2" src="logo2.png" alt="Stack Overflow">
  </a>
</h1>

CSS:

#logo #logo-img2 {
  display: none;
}
#logo:hover #logo-img1 {
  display: none;
}
#logo:hover #logo-img2 {
  display: inline;
}
Community
  • 1
  • 1
its_me
  • 10,998
  • 25
  • 82
  • 130

2 Answers2

2

You could use the box-sizing properties to load second image in background and show it on hover : HTML base:

<h1 id="logo">
  <a href="http://stackoverflow.com">
    <img src="http://lorempixel.com/100/100/abstract/2" alt="Stack Overflow">
  </a>
</h1>

CSS base:

h1 a img { 
  background:url(http://lorempixel.com/100/100/people/9);/* preload img 2 here */
  box-sizing:content-box;/* safe reset , use prefix */
}
h1 a:hover  img {
  height:0;
  width:0;
  padding:50px;
}

DEMO

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Can you please tell me where you got the '50px' value for padding from? Half the height and width of the image correct? – its_me Apr 10 '14 at 19:35
  • 1
    @its_me yes , this is it, it keeps img tag to have 100px width and height , size of img itself. to adapt to image sizes . For info, you can add transition and get few effects : http://codepen.io/gc-nomade/pen/Joqzp – G-Cyrillus Apr 10 '14 at 19:42
0

You have the right idea, but your :hover is in the incorrect place and the selectors are a bit off.

This should work, and is a bit more efficient for page loading!

HTML:

<div id="logo">
  <a href="http://stackoverflow.com">
    <img id="logo-img" src="logo1.png" alt="Stack Overflow">
  </a>
</div>

CSS:

#logo #logo-img {
    content:url("logo1.png");
}

#logo #logo-img:hover {
    content:url("logo2.png");
}
Ian Ryan Clarke
  • 268
  • 1
  • 8
  • Yes, its entirely possible to do it! All you need to do is specify the image URL once like so, and make it the background image of an element `#logo #logo-img { background-image: url("logo1.png"); }` and once it is hovered on, you do this: `#logo #logo-img:hover { background-position:0px 10px; }` It is basically using the same image, but just moving another part of it into view. See here: http://css-tricks.com/css-sprites/ – Ian Ryan Clarke Apr 10 '14 at 19:13
  • Appears not to be cross-browser compatible at all! (And the example in the JS fiddle isn't working (latest version of Firefox on Windows 7). There's no hover effect.) – its_me Apr 10 '14 at 19:13
  • In my own opinion it is a bad practise to switch content within a tag this way, beside , not sure that some search engines would appreciate this unattended trick :) – G-Cyrillus Apr 10 '14 at 19:17
  • It isn't bad practice at all in my opinion, this way there is only one request for an image, rather than two! Obviously this is NOT meant for large images, it is meant for navigation related items. – Ian Ryan Clarke Apr 10 '14 at 19:20
  • The only problem I have with this solution is that it's no cross-browser compatible at all. :-/ Otherwise a great trick! – its_me Apr 10 '14 at 19:25