Follow

CSS | Guide to: Enlarge Images on Hover

 

To maintain a clean layout in image-rich jobs, try using this handy trick for enlarging images only when you hover your mouse over them:

  1. Enter the following block of code into the Custom CSS field in your job:
     
    .thumbnail { 
    top:-50px;
    left:-35px;
    display:block;
    z-index:999;
    cursor: pointer;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    }

    /*change the number below to scale to the appropriate size*/
    .thumbnail:hover {
    transform: scale(3);
    }
     
  2. Add the attribute, class="thumbnail" to each image element that you would like to enlarge on hover so that the element looks something like this:
     
    <img src="[your hosted image URL]" class="thumbnail" height="100" width="100" /> 
  3. Save your job and test it out in preview mode.  You can always modify the original size of the image by changing the width and height in the <img> tag. Additionally, you can change the size to which it enlarges by increasing or decreasing the “scale” value in the CSS provided above.

hover_image.gif

Once you have modified the settings to your satisfaction, hit "Save" again.  You're all set: your images now are set up to enlarge when a contributor hovers on them with his or her mouse.


Was this article helpful?
77 out of 145 found this helpful


Have more questions? Submit a request
Powered by Zendesk