Adjusting image container not scaling

Question

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;
}



  
    
      
        fgds gfdsgfds
          gfdgs gfdsg fgsgsg
        
      
    
  
  
    
    gfdg dfsg sdfg sdg
    gfd gfds gfds gfsd gfds fd
    DISCUSS DESIGN PROJECT

Ricky Ruiz · Accepted Answer

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:

Hover effect from display: none; display:block; to opacity: 0; opacity: 1;
transform(x,y) for transformY(value) since you are just transforming Y axis
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;
}


  
    
      
        
        
          
            
              fgds gfdsgfds
              gfdgs gfdsg fgsgsg
            
          
        
      
    
  
  
    
      gfdg dfsg sdfg sdg
      gfd gfds gfds gfsd gfds fd
      DISCUSS DESIGN PROJECT

Adjusting image container not scaling

Answers (1)

Related Questions