JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<div id="work" class="container border-bottom">
  <h1>My work</h1>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port1">
      <h3>test</h3>
      <p>Website x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port2">
      <h3>test</h3>
      <p>project y</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port3">
      <h3>test</h3>
      <p>Webapplicatie x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port4">
      <h3>test</h3>
      <p>Website y</p>
    </div>
  </div>
</div>

CSS

/* 
My inner-divs have a background image which should be zooming in when you hover over it without the height and width of the div changing. I'm coming close but still the inner-div doesn't fill the full height of the outder-div. Unless you hover over it than the background image fills the entire height of the outer-div. This is because of the overflow:hidden I use I guess. Anyone knows how to fix this?

This is my HTML and CSS: */

.outer-div {
  overflow: hidden;
  height: 50px;
}

.inner-div {
  padding: 0px;
  margin: 0px;
  height: 20px;
}

#port1 {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
  background-image: url(../img/desk.jpg);
}

.inner-div:hover {
  transform: scale(1.2);
}