Results 1 to 2 of 2

Thread: Image effect ( Image magnifier)

  1. #1
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image effect ( Image magnifier)

    Could anyone, please, tell me how and what coding should I add to my webside code to have an image showing larger when mouse goes on the image? From Dynamic site I found one javaScript and added to my coding but did not work because it was complicated for me. I appreciate your help.

    Shawn

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    CSS will do:
    HTML Code:
    <base href="http://rangana.moonylist.com/images/">
    <style type="text/css">
    ul{list-style-type:none;}
    ul li{
    margin:5px;
    }
    ul a img{
    border:1px solid #222;
    width:150px;
    height:100px;
    }
    ul a:hover img{
    width:400px;height:330px;
    vertical-align:middle;
    }
    </style>
    <ul>
    <li><a href="#"><img src="Picture4.jpg" alt="mypics"></a></li>
    <li><a href="#"><img src="Picture5.jpg" alt="mypics"></a></li>
    <li><a href="#"><img src="Picture7.jpg" alt="mypics"></a></li>
    <li><a href="#"><img src="Picture8.jpg" alt="mypics"></a></li>
    <li><a href="#"><img src="Picture9.jpg" alt="mypics"></a></li>
    </ul>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •