8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Enlarge Images When Mouse Hover

by MarkLakewood3367
6 replies
  • WEB DESIGN
    • |
Is there an HTML code that I could use on my site that could enlarge images when a viewer hovers over the image with their cursor? Thanks.
#enlarge #hover #images #mouse
Avatar of Unregistered
  • Profile picture of the author hometutor
    I'm on my phone right now but I found that in Google when I developed a painter's website. If no one has helped by the time I get to my computer I'll look for the code.

    Rick
    Signature
    How to Keep Your Computer Files and Photos Safe in The 21st Century
    {{ DiscussionBoard.errors[11339189].message }}
  • Profile picture of the author Marani
    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. 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.
    Signature
    Internet Marketing Automation Tools
    {{ DiscussionBoard.errors[11340159].message }}
    • Profile picture of the author MarkLakewood3367
      Thanks, RIck. I entered both codes on my New Google Sites. I also inserted an image url in the code. The image doesn't display. Supposedly, the new Sites takes both html and css codes. I may have entered the info incorrectly.
      {{ DiscussionBoard.errors[11340175].message }}
  • Profile picture of the author Rajeev Gaur
    don't really remember the code but you can visit this page to get the codes- https://www.w3schools.com/howto/howt...zoom_hover.asp

    Hope it helps
    {{ DiscussionBoard.errors[11340449].message }}
    • Profile picture of the author MarkLakewood3367
      Thank you for your response. This is the code I originally wanted to use!! But, I cannot figure out how to replace the green box with an image. Do you have any idea as to how I can do this?
      {{ DiscussionBoard.errors[11340636].message }}
Avatar of Unregistered

Trending Topics