Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
sasand

Five: How Can I Get A Smooth/Gradual Hover Effect?

Question

Hi guys,

I'm trying to get a smooth hover effect over my linked images. My website is www.mensthetics.com, and if you hover over my images you can see how abrupt the opacity change is. I've pasted this code that I found somewhere to achieve that:


a:link img {
 opacity: 1.0;
 filter: alpha(opacity=100); /* For IE8 and earlier */
}

a:hover img {
 opacity: 0.8;
 filter: alpha(opacity=80); /* For IE8 and earlier */
}

I'm trying to achieve something more similar to http://www.muscleforlife.com/

PS. Also, if there is a way to get the same gradual/fade color change effect for my links that would also be much appreciated!

Edited by edokken

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0


a:link img,a:visited img {  opacity: 1.0;   filter: alpha(opacity=100);   /* For IE8 and earlier */  -webkit-transition: opacity 350ms ease-in-out;          transition: opacity 350ms ease-in-out;}a:hover img {  opacity: 0.8;   filter: alpha(opacity=80);    /* for IE8- */}

Another effect might be to display the image in its defaultstate at full opacity and on hover saturate it, give it a drop shadow and zoom in. Try

a:link img,a:visited img {     /* need not specify properties' default states * /  -webkit-transition: all 350ms ease-in-out;          transition: all 350ms ease-in-out;}a:hover img {  -webkit-filter: saturtate(125%) dropshadow(8px 5px 5px                                     rgba(61, 61, 61, 0.7));          filter: saturate(125%) dropshadow(8px 5px 5px                                    rgba(61, 61, 61, 0.7));  zoom: 120%;}

Try it out and let me know what you think.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...