Rollover Link – Zoom and Rotate

One of the best ways to create an interactive environment on your site is to add hover effects on your links. It gives the user a very satisfying feeling to have such a dynamic environment. You can even get creative and have images that fit with the theme of the overall site and turn them into links with hover effects. You can make all of this possible with CSS!

There are four types of links: normal, visited, active, and hover. Normal defines the style for a resting link, visited defines the style for a clicked link (eg changes color), active defines the style for links being clicked, and hover defines the style on mouse-over. Once I define all of these as shown below, you can simple use a div tag to apply all of the attributes in your html code. In this case, it would look like this:

<div class = “cool-link”>
<a href = “projects.html”;”>
<img src = “redeye.png” id = “rounded-corners1” style = “height:75px;
width:75px;”>
</a>

In my CSS code, I first define the normal link atrributes. In the case below, I simply define the font size.

<!– Dynamic Link –>
.cool-link {
font-size:13px;
}

Then, the active attributes are defined. All the jibber-jabber at the bottom is just to ensure compatibility with all of the browsers.

.cool-link a{
display: inline-block;
padding: 4px;
outline: 0;
color: #3a599d;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}

Next, the hover attributes are defined.
.cool-link a:hover {
/* background: #3a599d; */
text-decoration: none;
/* color: #fff; */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(2) rotate(-10deg);
-moz-transform: scale(2) rotate(-10deg);
-o-transform: scale(2) rotate(-10deg);
transform: scale(2) rotate(-10deg);
}

Finally, something that looks fairly complicated, but is just a way to add in the scaling and rotating.
.cool-link a:nth-child(2n):hover {
-webkit-transform: scale(2) rotate(10deg);
-moz-transform: scale(2) rotate(10deg);
-o-transform: scale(2) rotate(10deg);
transform: scale(2) rotate(10deg);
}

Copy the code and try it out for yourself!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s