Resize Responsive image without stretch + zoom effect on image link

Question

I have been searching for answers everywhere and can't find one that fits my needs. So I created a Fiddle to explain what I want to achieve: http://jsfiddle.net/Fran6/jbo5pfs4/3/

HTML:

<div class="col1">
<img></img>
<h1><a href="#">Title 1</a></h1>
</div>
<div class="col2">
<div class="box1"><img></img>
    <h1><a href="#">Title 2</a></h1>
</div>
<div class="box2"><img></img>
<h1><a href="#">Title 3</a></h1>
</div>
<div class="box3"><img></img>
<h1><a href="#">Title 4</a></h1>
</div>
</div>

I have containers positioned on the page. They have images and I would like to have them not stretched. I actually would like the same effect than for background-image: cover. That is my first question.

Then, I would like to have a zoom effect on the image when I hover it, via the link that is implemented with the title.

I can achieve these things separately but not together. Also, I started by using background images instead of in HTML but could not do the zoom effect.

So if anyone could help me solve my problem, that would be very nice !! :-)

Thanks !

Answer 1

I can complete the background-image: cover. Create a html tag with a id of 'cover' like so...

<div id="cover">
    <!-- content -->
</div>

Then, you need to do the following in CSS.

#cover {
    padding: 0, 0, 0, 0;
    background: url(http://placehold.it/300x150) top left no-repeat;
    background-size: cover;
    height: 300px;
}

I would imagine to do the zoom effect, you could possibly use :hover although I'm not 100% sure. Hope this helps though.