Appen Success Center
Appen Success Center
Breadcrumbs

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.

    image-20260618-055011.png


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.