Jump to content

enlarge image on mouseover

Recommended Posts


I found some css code online for enlarging images on mouseover but I don't know how to use this at all. I tried putting the this initial code in my custom code area:



//CSS to enlarge image on mouseover



<style type=”text/css”>
.enlargeleft:hover {float: left;}
a.enlargeleft:hover img {height: 120px;}
.enlarge:hover {}
a.enlarge:hover img {height: 120px;}

And then putting the code below in my content area to call in an image that I could mouseover:



// hyperlink to example image calling the CSS class



<a href=”#” class=”enlargeleft”>
<IMG height=65 hspace=6 src=”<URL TO IMAGE>” align=left vspace=1 border=0>

Then I substituted an image URL from my media library for the URL TO IMAGE


What I got was that funky symbol when an image is not available and linked to it was the text:


” align=left vspace=1 border=0>

This links to a 404 page currently.


I was wondering if anyone could be kind enough to tell me how to use this code currectly.


I'm noticing that when I publish this query the code looks different than what I typed, it is full of question marks in black diamonds. The original code I used is on this page.

Share this post

Link to post
Share on other sites
James B

Hi there, did you put in the full url to the image file in the html? If the link is displaying the image unavailable symbol I'd imagine there's something within the image path which is incorrect. The css seems fine and should work as long as you make sure the class .enlarge is listed added into the html in the content area.


As there is an issue with the pasting of the double quotes, have you checked this is appearing correctly on the page inside the wordpress editor, make sure you add into text view, not visual.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • mmista07
      By mmista07
      I have the free version of DMS installed on my WordPress install on www.mommymisadventures.com
      I'm unable to use it because whenever I mouseover any of the icons in the drag and drop interface, the icons disappear!
      This is what my screen looks like after I mouse over icons -- notice that several are missing.
      This happens on both my Windows 7 and Mac OS X Mavericks Chrome installations. Both installations of Chrome are up to date.
      I am running WP 3.8.1. I have already uninstalled the DMS version that installs from WordPress auto theme install and reinstalled the version from PageLines.com. 
      See attachments.