Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

share|improve this question
    
Perhapse you'd be kind enough to explain why this isn't what you wanted, and what actually you did want. –  Mike W Aug 5 '13 at 7:40
    
what's that ; after ---> #enlarge_images { ?? –  ViPiN Aug 5 '13 at 7:52
add comment

1 Answer

up vote 1 down vote accepted

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.