Customer Inquiries

1001 Mark Boulevard St.

New York, NY, US.


Mon - Sat 8.00 - 18.00


Sales department

+01 2345 6789

CSS Block Hover Links

One of the coolest effects for hyperlinks is to have an entire paragraph or block change background color on mouseover. Whatever is inside the block area remains the same, though. Just the background color changes. Here’s a look at how it looks while using some thumbnails that would represent the topic of each link at the same time. The thumbnails, however, do not have any hover effect themselves.


This is a quick view of how the block hover would work and look like


The HTML is pretty straight forward and the heights and widths can be adjusted to whatever you’d like them to be. My example shows the thumbnails at 80 x 87 in order to match the height of the block they represent. There’s no set height for the blocks themselves so you’ll need to judge your thumbnails based upon the amount of text you place into your blocks.

The trick with this is the ‘link’ is the entire block or li tag. Therefore, when you mouse over it, the hover effect covers the entire block

Here’s the HTML:

Here’s the CSS from the example:

#links ul {
        list-style-type: none;
        width: 400px;
		float: left;
		margin: 0px;
		padding: 0px;

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
	float: left;

#links li a:hover {
        background: #FCD5AD

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;

#linkwrapper {
width: 550px;
border: 0;

#linkpics {
width: 80px;
float: left;
padding: 5px;
margin-right: 10px;

.linksimage {
float: left;
width: 80px;
margin-bottom: 5px;
border: 1px #CC3300 solid;
padding: 3px;
background: #FF9900;


Notice that there’s a div that wraps around the entire set of blocks. This is done so the other two divs will reside side by side when using the float: left; selector on each. The width of the wrapping div needs to be wide enough to accommodate both child divs plus their margins, borders and padding.

Another note, the IE special instruction is there since IE requires that the link itself be the same width of the div. Otherwise it won’t work in IE.

Obviously you can make this example as wide as you need it and add additional li’s to the mix. This type of setup would make a nice navigation system for a product page. You could even use Ajax to load content into another div on the page when these hyperlink blocks are clicked on.



Pin It on Pinterest

Share This