Problem with CSS Enlarge on Hover Effect

I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and the tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image) Here is my implementation of the tutorial: mulnix.contestari.com/wp/example225/1.php

My two thoughts to fix this were #1, just change overflow to "visible" on the div for the photo and it will show the entire image.  But that had no effect.  My #2 thought was to make sure the z-index of the photo was higher than anything else.  That didn't seem to work either (although I'm not 100% sure I did it right).

The two simple files are 1.php (the html) and gall.css.  I'll paste the code here in case you would rather see it right in the posting.  
Thanks in advance!

1.php BELOW:
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Image Hover Effects | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/gall.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Image Hover Effects</h2>
            <a href="http://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

		<div class="wrapper">
        <!-- panel with buttons -->
        <div class="photos">
            <div>
                <img src="images/pic1.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic2.jpg" />
               
            </div>
            <div>
                <img src="images/pic3.jpg" />
                
            </div>
            <div>
                <img src="images/pic4.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic5.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic6.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic7.jpg" />
                <div></div>
            </div>
			
            <div>
                <img src="images/pic8.jpg" />
                <div></div>
            </div>
            <div class="pair">
                <img src="images/pic9.jpg" />
                <div></div>
                <div></div>
            </div>
			
        </div>
	  </div>	
    </body>
</html>

Open in new window


gall.css BELOW:
.wrapper {
margin: 0px auto;
background: #130802;
width: 1024px;
position: relative;
overflow: hidden;
color: #F2D5B7;
    z-index: 0;
}

.photos {
/*
    width: 945px;
    height: 400px;
    margin: 100px auto;
	*/
    position:relative;
}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 100px;
    margin: 5px;
    /* overflow: hidden; */
	overflow: visible; 
    position: relative;
    width: 300px;
    z-index: 1;

    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;

    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}

Open in new window

LVL 1
Thread7Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
A link to your page would be better because the code you posted seems to work just fine.
0
Thread7Author Commented:
There is a link.  I'll post here again: mulnix.contestari.com/wp/example225/1.php

I doubt it works for you though.  You should notice that when you hover over any of the images, the enlarged image gets hidden behind the "wrapper" div wherever the two overlap.
0
GaryCommented:
Sorry thought you had linked to the original demo.
Remove overflow:hidden from the .wrapper container and add display:inline-block
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

DewmecCommented:
Hi Thread7,

I have somewhat of a solution that allows the images to stay viewable in the div, but it does change the effect slightly from having a zooming effect to just appearing. However, it does solve the problem. Add the following code to the end of the gall.css:
#img1:hover {
	padding: 25px 0px 0px 72px;
	height: 100px;
	width: 300px;
}

#img2:hover {
	padding: 25px 0px 0px 0px;
	height: 100px;
	width: 300px;
}

#img3:hover {
	padding: 25px 80px 0px 0px;
	height: 100px;
	width: 300px;
}

#img4:hover {
	padding: 0px 0px 0px 72px;
	height: 100px;
	width: 300px;
}

#img5:hover {
	padding: 0px 0px 0px 0px;
	height: 100px;
	width: 300px;
}

#img6:hover {
	padding: 0px 0px 0px 00px;
	height: 100px;
	width: 300px;
}

#img7:hover {
	padding: 0px 0px 0px 72px;
	height: 100px;
	width: 300px;
}

#img8:hover {
	padding: 0px 0px 0px 0px;
	height: 100px;
	width: 300px;
}

#img9:hover {
	padding: 0px 0px 0px 0px;
	height: 100px;
	width: 300px;
}

Open in new window

Then change the photo div section as follows in the php:
        <div class="photos">
            <div>
                <div id="img1"><img src="images/pic1.jpg"></div>
            </div>
            <div>
            		<div id="img2"><img src="images/pic2.jpg"></div>
            </div>
            <div>
            		<div id="img3"><img src="images/pic3.jpg"></div>
            </div>
            <div>
            		<div id="img4"><img src="images/pic4.jpg"></div>
            </div>
            <div>
            		<div id="img5"><img src="images/pic5.jpg"></div>
            </div>
            <div>
            		<div id="img6"><img src="images/pic6.jpg"></div>
            </div>
            <div>
            		<div id="img7"><img src="images/pic7.jpg"></div>
            </div>
            <div>
            		<div id="img8"><img src="images/pic8.jpg"></div>
            </div>
            <div>
            		<div id="img9"><img src="images/pic9.jpg"></div>
            </div>		
        </div>

Open in new window

The first 6 images work as intended, but I am still have to adjust the last 3 on the bottom, which will have to be tomorrow evening later on. Let me know if this will work for you and I will complete those changes to the css as stated.

Thanks,
Dewmec
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Thread7Author Commented:
Actually, this helps a lot.  I think I can take it from here.  Thank you very much.
0
GaryCommented:
Did you try what I said?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.