Enlarge Images When Mouse Hover

by MarkLakewood3367

Posted: 7 years ago 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

hometutor 7 years ago

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
- Thanks
- Reply
- 1 reply
Signature
Video - How Local Businesses Benefit from Monetized On-Topic Breaking News Releases Linking Back to Their Websites
{{ DiscussionBoard.errors[11339189].message }}
- hometutor 7 years ago
  
  I couldn't find my code and it's too long to remember, but since I said I would help I found some well rounded solutions here https://stackoverflow.com/questions/...-over-an-image
  
  Rick
  
  Thanks
  
  Reply
  
  Signature
  Video - How Local Businesses Benefit from Monetized On-Topic Breaking News Releases Linking Back to Their Websites
  
  {{ DiscussionBoard.errors[11339639].message }}
Marani 7 years ago

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 }}
- MarkLakewood3367 7 years ago
  
  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.
  
  Thanks
  
  Reply
  
  {{ DiscussionBoard.errors[11340175].message }}
Rajeev Gaur 7 years ago

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
- Thanks
- Reply
- 1 reply
{{ DiscussionBoard.errors[11340449].message }}
- MarkLakewood3367 7 years ago
  
  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?
  
  Thanks
  
  Reply
  
  {{ DiscussionBoard.errors[11340636].message }}

Enlarge Images When Mouse Hover

Trending Topics

Should I add a AI chatbot to my website?

Is it normal to get no traffic in the first month?

Singer Songwriters Cut Off In Their Prime

What is best Backlink strategy?

New Here! Excited to Learn & Share SEO + Affiliate Strategies