Responsive Image Hover Zoom

Question

I am trying to build a responsive image hover. I have made the width responsive without issue, but the height is causing problems. I have tried:

1. setting up a min/max height pixel wise setting height to auto (this causes my image to disappear)
2. using a percentage for the height (100% - this causes my image to disappear)
3. using media queries (changes at the breakpoints only)

I am basing this CSS largely off the post Responsive Image Hover - CSS/JQuery , but I have not been able to make sense of the solutions offered for height or I am executing them incorrectly.

 .viewport_css { position: relative; max-width: 599px; height: auto; overflow: hidden; } .viewport_css .dummy { width: 100%; height: auto; display: block; } .viewport_css a, .viewport_css a:hover:before, .viewport_css a:hover:after { position: absolute; left: 0; right: 0; } .viewport_css a, .viewport_css a:hover:after { top: 0; bottom: 0; } .viewport_css a:hover:after { content: ''; display: block; z-index: 100; background-color: rgba(255, 255, 255, .25); } .viewport_css a:hover:before { content: 'View'; color: #fff; top: 50%; text-align: center; z-index: 200; margin-top: -0.5em; } .viewport_css .imgwrapper { width: 200%; height: 200%; margin-left: -50%; margin-top: -50%; transition: all 0.5s ease-in; } .viewport_css .imgwrapper img { width: 100%; height: auto; display: block; } .viewport_css .imgwrapper:hover { width: 100%; height: 100%; margin-left: 0; margin-top: 0; }

 <div class="ImageContainer"> <div id="PurpleColor"> <h2>Videography</h2> </div> <div class="viewport_css"> <a class="imgwrapper" href="#"> <img class="dummy" src="links/Home-Videography.jpg" /> </a></div> <div class="ImageFooter" id="Purple"> <p class="ImageContainerP"> The latest technology</p> </div> </div>

Answer 1

Have you tried taking a look at the CSS transform property?

If not, take a look here (w3c) or here(dev.moz) or just here (google (search for css transform scale)) to find out how it works.

Basically it increases or decreases the size of your element according to the values you have put in

DEMO

Answer 2

I ended up doing further research regarding the transform feature and I think I've got it figured out. My image is now responsive with a coloured background instead of a tinted overlay, using the opacity feature for the rollover, which works. The only feature I had to give up was the text. Adding an absolute position (such as: .photo a{position:absolute}) collapsed the entire div. If anyone has a solution to that problem, I'd be interested in hearing about it. The text was a nice addition, but fortunately I'm not in need of it for this project.

.photo {
max-width: 599px;
width:100%;
background-color:#A54499;
height: auto;
position: relative;
overflow: hidden;
}
.grow img {
width: 100%;
height: auto;
background-color:#A54499;
transition: all 0.5s ease-in-out;
}
.grow img:hover {
display: block;
z-index: 100;
-webkit-transform: scale(1.17);
transform: scale(1.17);
opacity: 0.7;
}

SOURCE CODE

<div class="ImageContainer">
    <div id="PurpleColor">
          <h2>Videography</h2> 
    </div>

    <div class="photo">
        <a class="grow" href="#">
            <img src="links/Home-Videography.jpg" />
        </a></div>

        <div class="ImageFooter" id="Purple">
            <p class="ImageContainerP">
            The latest technology with outstanding techniques</p>
        </div>

   </div>
</div>