How can I create a zoom in effect with background images using CSS?

Question

I've got a flex setup of list items to display information. I have a background image attached to these list items but I would like to create a zoom in effect when hovered or focused by a mouse. I think i'm partly on the way there, however my current setup makes it so that they are stretched out on mobile screens. I'm wondering if there's a way to achieve what i'm trying to do that is responsive.

I've searched for similar posts and I find that a lot of people use overflow: hidden; with a transform scale, I can't seem to get that to work with flex. Any help would be greatly appreciated!

body {
  font-family: sans-serif;
}

h2 {
  color: #3CAD5D;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1500px;
  width: 100%;
}

li {
  display: flex;
  width: calc(33.333333% - 10px);
}

a {
  flex-grow: 1;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  box-shadow: 3px 3px 5px #888888;
  padding: 20px;
}

a:hover {
  color: #fff;
}


/*** MEDIA QUERIES ***/

@media screen and (max-width: 800px) {
  ul {
    flex-direction: column;
    /* change direction of flex for mobile */
    margin: 0 auto;
  }
  li {
    width: 97%;
  }
}


/*** BG WITH ZOOM ***/

.bg1 {
  background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
  margin: 5px;
}

.bg2 {
  background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
  margin: 5px;
}

.bg3 {
  background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
  margin: 5px;
}

.bg1,
.bg2,
.bg3 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.bg1:hover,
.bg2:hover,
.bg3:hover {
  background-size: 130% 130%;
}

<ul>
  <li class="bg1">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg2">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg3">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg1">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg2">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg3">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>
</ul>

Possible duplicate of [how do I zoom a background image on a div with background-size](https://stackoverflow.com/questions/21300673/how-do-i-zoom-a-background-image-on-a-div-with-background-size) — FluffyKitten, Oct 23 '17 at 19:03
To make your background image fill the element without getting distorted and regardless of its height:width ratio, the standard way is to use `background-size:cover`. However that causes problems with the zoom, so take a look at the question in the link above for ways to overcome that. — FluffyKitten, Oct 23 '17 at 19:05
Hi, thanks for your response! I've tried using cover unfortunately it didn't work for me, as well as this post you linked they have static sized 300px boxes and mine aren't static so it won't allow me to apply the same principles. I could be completely wrong however, I will give it another read. — Aaron, Oct 23 '17 at 19:12
I only looked at it briefly, but I think the first demo in the accepted answer might work... the image resizes and fills the div if it grows either in width or height. Its worth a look anyway :) — FluffyKitten, Oct 23 '17 at 19:18
Thanks for all of your responses! I tried the first demo but unfortunately it doesn't work without position: absolute; and that, for some reason decides to break all of my other list items! Sorry to be a bother — Aaron, Oct 23 '17 at 19:55

zer00ne · Accepted Answer · 2017-10-23T20:34:26.183

Update

For the first 3 images: Added a <div> to each <li> then removed .bg* .classes from the <li> and gave them to the new inner <div>. Then added overflow:hidden to <li>.

Added transform: scale(1.3 ) to the *:hover rulesets. Changed background-size:100% 100% to background-size:cover

Demo

body {
  font-family: sans-serif;
}

h2 {
  color: #3CAD5D;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1500px;
  width: 100%;
}

li {
  display: flex;
  width: calc(33.333333% - 10px);
  overflow: hidden;
}

a {
  flex-grow: 1;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  box-shadow: 3px 3px 5px #888888;
  padding: 20px;
}

a:hover {
  color: #fff;
}


/*** MEDIA QUERIES ***/

@media screen and (max-width: 800px) {
  ul {
    flex-direction: column;
    /* change direction of flex for mobile */
    margin: 0 auto;
  }
  li {
    width: 97%;
  }
}


/*** BG WITH ZOOM ***/

.bg1 {
  background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
  margin: 5px;
}

.bg2 {
  background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
  margin: 5px;
}

.bg3 {
  background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
  margin: 5px;
}

.bg1,
.bg2,
.bg3 {
  background-size: cover;
  /* Changed to cover */
  background-repeat: no-repeat;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.bg1:hover,
.bg2:hover,
.bg3:hover {
  transform: scale(1.3);
  /* Changed to transform:scale() */
}

<ul>
  <li>
    <div class="bg1">
      <a href="#">
        <h2>References</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </a>
    </div>
  </li>
  <li>
    <div class="bg2">
      <a href="#">
        <h2>References</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </a>
    </div>
  </li>
  <li>
    <div class="bg3">
      <a href="#">
        <h2>References</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
          ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </a>
    </div>
  </li>

  <li class="bg1">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg2">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg3">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>
</ul>

Hi! I've been able to replicate this in my experiments but is there a way for it not to enlarge out of it's boundaries but instead appear as though it's zooming in? Sorry to be pedantic! Thank you so much for your help! — Aaron, Oct 23 '17 at 20:17
@Aaron Ok review the update and let me know if I grokked correctly.or not. I applied the update to first 3 images so you can compare. — zer00ne, Oct 23 '17 at 20:28
I'm not sure what you did but you are a life saver! Could you explain to me how you did this so I may be able to replicate it in the future? — Aaron, Oct 23 '17 at 21:00
Nevermind, I saw you edited the initial post description, thank you so much! — Aaron, Oct 23 '17 at 21:01
Great, I'm glad I can be of help. You're welcome, happy coding. — zer00ne, Oct 23 '17 at 21:21

How can I create a zoom in effect with background images using CSS?

1 Answers1

Update

Demo