Site ID that uses image replacement.

How to make this site id

If you want to have a hover on your image-based site-id that changes the image (not just opacity or saturation), image replacement is the way to go. This needs special markup so we can "replace" the text in the page with a background image, but still work for SEO. We need to surround the text itself in the site id with a span tag, so it will not be visible in the final design.

Image replacement can also be useful for shortcut menus that are image-based with overlapping text (or no text).

Process:

  • The background image goes in the anchor tag. You'll use a descendant selector for this: .site-id a {}. Use this file: site-id-illustration.png.
  • Because you want the anchor tag to be the exact size of the background image, you'll need to use the display property to make it generate a block display box, and then you'll use the height and width properties to assign it the same number of pixels as the graphic. See notes about high density display workarounds. We'll need to change the background-size of our image.
  • The hover style puts in the hover background image for the anchor tag: .site-id a:hover {}. Use this file: site-id-illustration-hover.png.
  • You need a span tag INSIDE the anchor tag so you can "turn off" the text. <a><span>linked text</span></a>
  • You set the opacity of the text inside the span to 0. .site-id a:hover span {}
  • An easy way to center the site id is to set its width (same as the anchor tag/background image) and use auto margins on left and right.

Viburnum filler text

Viburnums have long been one of the most popular flowering landscape shrubs. There are over 150 species of Viburnum. You can find a variety to suit any garden need: wet or dry, sun or shade, natural or formal, shrub or tree, native or exotic, USDA Zones 2-9. Bloom times span early spring through June and are followed by attractive fruit and outstanding fall foliage.

Most viburnums prefer full sun but will adjust to partial shade. They like a moderately fertile soil with a pH between 5.6 - 6.6., although many do just fine in alkaline soils. In general, viburnums are not terrible particular about where they grow.

That few pests will bother viburnums is one of the reasons they have become so popular in the landscape. Recently the Viburnum Leaf Beetle (VLB) has been introduced into North America trough Canada and has begun making its way south.