Posts

Showing posts from October, 2016

CSS Rollover Image Effect - Change Image on Hover

Image
Rollover image is a design feature where an image changes when your mouse hovers over it. Think of a light bulb that turns on and off when you move your mouse cursor into that area of a page. When a page is loading, rollover images are preloaded into it to ensure that the rollover effect is displayed quickly. This used to be implemented using JavaScript , which is fairly easy with just a small amount of script involved. To make rollover images functional, onmouseover and onmouseout attributes are used to a link tag. The code is then added to a blog gadget or into a new post. It proved to have a number of disadvantages, however, which is why many web developers are using a CSS-only method. How to create a rollover image using CSS Here is how to implement a rollover image using CSS. Before getting started, we need to have two images ready, one in its initial/static state as well as its rollover state. The Image Place both the static and rollover image in one file and make sure that th...

How to Create a Static Home Page in Blogger

Image
When it comes to home pages, most websites can be divided into two: static and non-static. As their name implies, static home pages stay permanent no matter how many times the website is updated, while non-static home pages reflect the changes that are made to the site and show the latest posts first. The latter has become well-known nowadays due to the rising popularity of personal and even corporate blogs. However, there are still many people who prefer static home pages because it makes their websites look more organized and professional. It also gives them more control over the readers' experience on their site and helps them create stronger brand awareness through the uniform message that their home page presents. Fortunately, if you own a Blogger site and want to make your home page static, you'll find that creating one isn't as difficult as it seems. You can create a static home page in Blogger by taking these steps: 1. Create your static home page The first thing ...