Follow

CSS | Guide to: Enlarge Images on Hover

  1. 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:hover {
        position:relative;
        top:-25px;
        left:-35px;
        width:500px;
        height:auto;
        display:block;
        z-index:999;
    }
     
  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 "width" 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?
4 out of 6 found this helpful


Have more questions? Submit a request
Powered by Zendesk