troubleshooting Question

Problem with CSS Enlarge on Hover Effect

Avatar of Thread7
Thread7 asked on
Web DevelopmentCSSHTML
6 Comments1 Solution1521 ViewsLast Modified:
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>

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);
}
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 6 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros