This topic is now archived and is closed to further replies.

  • 0

enlarge image on mouseover


Posted · Report post

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

1 answer to this question

Posted · Report post

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.

Share this post

Link to post
Share on other sites