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

Best way to create rollover effect (hover effect) on images?



  • Answers 55
  • Created
  • Last Reply

Recommended Posts

One solution could be to make the image "grow" a bit on hover. If you would like to try this, cut all the code I gave you from Page Header Code Injection and copy and past the following:`

a img.thumb-image {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
         transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
 -webkit-transition-duration: 0.3s;
         transition-duration: 0.3s;
 -webkit-transition-property: transform;
         transition-property: transform;

a img.thumb-image:hover,
a img.thumb-image:active {
 -webkit-transform: scale(1.1);
         transform: scale(1.1);

I've tried this code with a button on my site and it works. I don't know what it will look like with your photo images but for the social images it should work.

If you decide to try this, let me know what happens and whether you like it.

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 comment

I am trying all of these and none (with sort of-the exception of final code above.

However, I am trying to start out with my set of images WITH an opacity mask and when rolled over, I want the fully colored image to appear. Anyone know how to do that?

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • Create New...