CODEWITHSUNDEEP
htmlcssflexboxtransition
Aaron
Aaron

Reputation: 199

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

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>

Upvotes: 2

Views: 48

Answers (1)

zer00ne
zer00ne

Reputation: 43910

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>

Upvotes: 1

Related Questions