I am using the css and Javascript method to enlarge the image in a page.. I used some code s which didn't give me a correct way..

Seeking help and I have given my fiddle link below

My Css is

 #demo {
                overflow: hidden;
                width: 120px;
                text-align: center;
                padding: 10px;
                z-index: 3;
            }

                #demo img {
                    border: none;
                    width: 100px;
                    height: 100px;
                    border: 5px solid #f4f4f4;
                    z-index: 3;
                }

            #enlarge_images {
                ;
                display: none;
                border: 5px solid #f4f4f4;
                z-index: 100;
            }

I tried this Fiddle CODE

I am using the css and Javascript method to enlarge the image in a page.. I used some code s which didn't give me a correct way..

Seeking help and I have given my fiddle link below

My Css is

 #demo {
                overflow: hidden;
                width: 120px;
                text-align: center;
                padding: 10px;
                z-index: 3;
            }

                #demo img {
                    border: none;
                    width: 100px;
                    height: 100px;
                    border: 5px solid #f4f4f4;
                    z-index: 3;
                }

            #enlarge_images {
                ;
                display: none;
                border: 5px solid #f4f4f4;
                z-index: 100;
            }

I tried this Fiddle CODE

• javascript
• css
• html

Share Improve this question Follow asked Aug 5, 2013 at 7:35 SARAVANA KUMARSARAVANA KUMAR 47422 gold badges66 silver badges1616 bronze badges 2

• Perhapse you'd be kind enough to explain why this isn't what you wanted, and what actually you did want. – user1864610 Commented Aug 5, 2013 at 7:40
• what's that ; after ---> #enlarge_images { ?? – Vipin Kumar KM Commented Aug 5, 2013 at 7:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Check out this Fiddle

WORKING DEMO

Not exactly sure what your javascript did or was meant to do but check this out .

CSS

 #demo img{
     width: 100px;     
     padding: 10px;
     z-index: 3;
 }
 #demo img:hover {
     border: 5px solid #f4f4f4;
    transform: scale(2.8);
      -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
     z-index: 3;
 }

HTML

<div id="demo" >
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>