Becky
Becky

Reputation: 2275

Adjusting image container not scaling

I have a main container projects-container and then two children containers .project-block and like-work. I added in scaling code to my image in order for it to resize the width and height to keep the correct proportions. This is causing two seperate issues. The first issue is my like-work container is not even visible on the page anymore ..... see it live here . It shows on the snippet, but not on the page.

Secondly I cannot figure out how to get the project-block-banner to stay hidden with adjusting height with doing display:none and then display-block on hover. Before when I had set height, it would be hidden under the image, due to the overflow:hidden` and then slide up on hover. Now it just plops up into place instead of transitioning.

Does anyone know what I can do for these two issues? I'm not sure if my image resizing is the root for all of this and if so, is there a better way to resize the image?

$('.project-block img').addClass(function() {
  return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#projects-container {
  height: auto;
  width: 100%;
}
.project-block {
  width: 33.33333333333333333333333333%;
  height: 60%;
  display: inline-block;
  overflow: hidden;
}
.mobile {
  display: none;
}
.project-block img {
  width: 100%;
  height: 100%;
  -webkit-transition-duration: .7s;
  transition-duration: .7s;
  position: relative;
}
.project-block img.wide {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
}
.project-block img.tall {
  max-width: 100%;
  max-height: 100%;
  width: auto;
}
.project-block img:hover {
  transform: translate(0, -65px);
  -webkit-transform: translate(0, -65px);
  -webkit-transition-duration: .7s;
  transition-duration: .7s;
}
.project-block-banner {
  position: relative;
  width: 100%;
  height: 150px;
  bottom: -.00000000000001;
  background: #00a16d;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  display: none;
}
.project-block-banner-container {
  padding: 40px 50px;
}
.project-block-banner-container a {
  text-decoration: none;
}	
.project-block img:hover + .project-block-banner {
  transform: translate(0, -150px);
  -webkit-transform: translate(0, -150px);
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  display: block;
}
.project-block-banner-name, .project-block-banner-description {
  color: #FFF;
  text-decoration: none;
}
.project-block-banner-name {
  font-size: 1.8em;
  margin-bottom: 10px;
}
.project-block-banner-description {
  font-size: 1.2em;
}

/*---Like Work----*/
#like-work {
  background: #0085a1;
  width: 66.66666666666666666666%;
  display: inline-block;
  height: 60%;
  vertical-align: top;
  position: relative;
}
#like-work-container {
  padding: 0 100px;
}
#like-title, #like-title2, #like-links {
  color: #FFF;
}
#like-title {
  font-size: 2.5em;
  margin-bottom: 35px;
}
#like-title2 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-bottom: 65px;
}
#like-links a {
  font-size: 1.2em;
}
#like-links a {
  text-decoration: none;
}
#like-links-button {
  padding: 15px 20px;
  border: 2px solid #FFF;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
  color: #FFF;
}
#like-links-button:hover {
  border: 2px solid #FFF;
  background: #FFF;
  color: #0085a1;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="projects-container">
  <div class="project-block">
    <a href="projects/eslich-wrecking"><img src="http://optimumwebdesigns.com/images/work/eslich.jpg" alt="" class="desktop"><div class="project-block-banner">
      <div class="project-block-banner-container">
        <div class="project-block-banner-name">fgds gfdsgfds</div>
          <div class="project-block-banner-description">gfdgs gfdsg fgsgsg</div>
        </div>
      </div>
    </a>
  </div>
  <div id="like-work">
    <div id="like-work-container" class="total-center">
    <div id="like-title">gfdg dfsg sdfg sdg</div>
    <div id="like-title2">gfd gfds gfds gfsd gfds fd</div>
    <div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>
  </div>
</div>
</div>

Upvotes: 0

Views: 76

Answers (1)

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

SOLUTION:

Here's an approach you could try, wrap your image and text blocks in a figure tag and a figcaption respectively.

I changed the following:

  1. Hover effect from display: none; display:block; to opacity: 0; opacity: 1;
  2. transform(x,y) for transformY(value) since you are just transforming Y axis
  3. Vendor prefixes order, always having the main css property after the vendors.

PLAYGROUND::

JSFiddle


CODE SNIPPET:

*::after,
*::before {
  content: "";
  display: block;
  clear: both;
}

#projects-container {
  height: auto;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.project-block {
  width: 33.33333333333333333333333333%;
  overflow: hidden;
  float: left;
  display: flex;
  flex-direction: column;
}

.mobile {
  display: none;
}

.project-block img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-transition-duration: .7s;
  transition-duration: .7s;
  position: relative;
}

.project-block figure:hover img {
  -webkit-transform: translateY(-65px);
  transform: translateY(-65px);
}

.project-block a {
  display: block;
}

.project-block figure {
  overflow: hidden;
  margin: 0;
  position: relative;
}

.project-block figcaption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  background-color: #00a16d;
  color: #ffffff;
  height: 150px;
  width: 100%;
  top: auto;
  bottom: 0;
  opacity: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.1s 0.3s;
  -moz-transition: -moz-transform 0.5s, opacity 0.1s 0.3s;
  transition: transform 0.5s, opacity 0.1s 0.3s;
}

.project-block figure:hover figcaption {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
  -moz-transition: -moz-transform 0.5s, opacity 0.1s;
  transition: transform 0.5s, opacity 0.1s;
}

.project-block-banner-container {
  padding: 40px 50px;
}

.project-block-banner-container a {
  text-decoration: none;
}

.project-block-banner-name,
.project-block-banner-description {
  color: #FFF;
  text-decoration: none;
}

.project-block-banner-name {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.project-block-banner-description {
  font-size: 1.2em;
}


/*---Like Work----*/

#like-work {
  background: #0085a1;
  width: 66.66666666666666666666%;
  float: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

#like-work-container {
}

#like-title,
#like-title2,
#like-links {
  color: #FFF;
}

#like-title {
  font-size: 2.5em;
  margin-bottom: 35px;
}

#like-title2 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-bottom: 65px;
}

#like-links a {
  font-size: 1.2em;
}

#like-links a {
  text-decoration: none;
}

#like-links-button {
  padding: 15px 20px;
  border: 2px solid #FFF;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
  color: #FFF;
}

#like-links-button:hover {
  border: 2px solid #FFF;
  background: #FFF;
  color: #0085a1;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
}

.total-center {
  text-align: center;
}
<div id="projects-container">
  <div class="project-block">
    <a href="projects/eslich-wrecking">
      <figure>
        <img src="http://optimumwebdesigns.com/images/work/eslich.jpg" alt="" class="desktop">
        <figcaption>
          <div class="project-block-banner">
            <div class="project-block-banner-container">
              <div class="project-block-banner-name">fgds gfdsgfds</div>
              <div class="project-block-banner-description">gfdgs gfdsg fgsgsg</div>
            </div>
          </div>
        </figcaption>
      </figure>
    </a>
  </div>
  <div id="like-work">
    <div id="like-work-container" class="total-center">
      <div id="like-title">gfdg dfsg sdfg sdg</div>
      <div id="like-title2">gfd gfds gfds gfsd gfds fd</div>
      <div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions