Avatar of Thread7
Thread7 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

HTMLCSSWeb Development

Avatar of undefined
Last Comment
Gary

8/22/2022 - Mon
Gary

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

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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Dewmec

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Thread7

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

Did you try what I said?