asked on

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

Gary

A link to your page would be better because the code you posted seems to work just fine.

Thread7

ASKER

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.

Gary

Sorry thought you had linked to the original demo.
Remove overflow:hidden from the .wrapper container and add display:inline-block

ASKER CERTIFIED SOLUTION

Dewmec

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Thread7

ASKER

Actually, this helps a lot. I think I can take it from here. Thank you very much.

Gary

Did you try what I said?