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

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


sasand

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
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

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.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...