title: Why would just duplicate css style as new style and referring to new style cause image to not display
body: <p>Im trying to make modifications to a html template I purchased.</p>
  
  <p>The template lets you show a grid of images and when you move your mouse over an image they slightly magnify so its clear what you are looking at. The template was originally designed for square (350px x 350 px size) but most of my images are 4:3 aspect ratio so I adjusted it to work for 400x300 images no problem. Here is the key part of the css</p>
  
  <pre><code>/* line 881, sass/style.scss */
  .progect_img {
    padding: 9% 0 0 0;
  }
  
  /* line 886, sass/style.scss */
  .progect_img:after {
    content: "";
    display: block;
    clear: both;
  }
  
  
  /* line 913, sass/style.scss */
  .progect_img .img {
    float: left;
    width: 33%;
    overflow: hidden;
    text-align: center;
    margin: 0 0 6% 0;
    max-height: 300px;
    cursor: pointer;
    line-height: 300px;
    position: relative;
  }
  
  /* line 1948, sass/style.scss */
  .progect_img  .img:hover .bg {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
  }
  
  /* line 923, sass/style.scss */
  .progect_img .img .bg {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40%;
    background-position: center;
    background-size: cover;
    width: 80%;
    height: 100%;
    -webkit-transition: all 0.6s 0.1s;
    -moz-transition: all 0.6s 0.1s;
    -o-transition: all 0.6s 0.1s;
    -ms-transition: all 0.6s 0.1s;
    transition: all 0.6s 0.1s;
  }
  
  /* line 944, sass/style.scss */
  .progect_img .img img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    opacity: 0;
    -webkit-transition: all 0.6s 0.1s;
    -moz-transition: all 0.6s 0.1s;
    -o-transition: all 0.6s 0.1s;
    -ms-transition: all 0.6s 0.1s;
    transition: all 0.6s 0.1s;
    position: relative;
    z-index: 1;
  }
  </code></pre>
  
  <p>and the html would use as follows:</p>
  
  <pre><code>&lt;div class="progect_img"&gt;
      &lt;div class="img"&gt;
          &lt;img src="photos/400x300/image1.jpg"&gt;
      &lt;/div&gt;&lt;!-- img --&gt;
      &lt;div class="img"&gt;
          &lt;img src="photos/400x300/image2.jpg"&gt;
      &lt;/div&gt;&lt;!-- img --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However I also have some images in 3:4 aspect ratio these look terrible with the standard css because the image is expanded to fit the available width and loses much of the vertical image.</p>
  
  <pre><code>&lt;div class="progect_img"&gt;
      &lt;div class="img"&gt;
          &lt;img src="photos/400x300/image1.jpg"&gt;
      &lt;/div&gt;&lt;!-- img --&gt;
      &lt;div class="img"&gt;
          &lt;img src="photos/400x300/image2.jpg"&gt;
      &lt;/div&gt;&lt;!-- img --&gt;
      &lt;div class="img"&gt;
          &lt;img src="photos/300x400/image3.jpg"&gt;
      &lt;/div&gt;&lt;!-- img --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>if I remove the class="img" from the new 3:4 image then it looks okay but of course nothing happen when you hover over it.</p>
  
  <p>So my plan was to just make a copy of the css styles that refer to .img and call them .img2 then have the third image use class="img2". But if I just copy the classes wihtout even making changes , i.e just adding the following to css</p>
  
  <pre><code>/* line 913, sass/style.scss */
  .progect_img .img2 {
    float: left;
    width: 33%;
    overflow: hidden;
    text-align: center;
    margin: 0 0 6% 0;
    max-height: 300px;
    cursor: pointer;
    line-height: 300px;
    position: relative;
  }
  
      /* line 1948, sass/style.scss */
      .progect_img  .img2:hover .bg {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        transform: scale(1.05);
      }
  
      /* line 923, sass/style.scss */
      .progect_img .img2 .bg {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -40%;
        background-position: center;
        background-size: cover;
        width: 80%;
        height: 100%;
        -webkit-transition: all 0.6s 0.1s;
        -moz-transition: all 0.6s 0.1s;
        -o-transition: all 0.6s 0.1s;
        -ms-transition: all 0.6s 0.1s;
        transition: all 0.6s 0.1s;
      }
  
      /* line 944, sass/style.scss */
      .progect_img .img2 img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
        opacity: 0;
        -webkit-transition: all 0.6s 0.1s;
        -moz-transition: all 0.6s 0.1s;
        -o-transition: all 0.6s 0.1s;
        -ms-transition: all 0.6s 0.1s;
        transition: all 0.6s 0.1s;
        position: relative;
        z-index: 1;
      }
  </code></pre>
  
  <p>and change my webpage to</p>
  
  <pre><code>&lt;div class="progect_img"&gt;
          &lt;div class="img"&gt;
              &lt;img src="photos/400x300/image1.jpg"&gt;
          &lt;/div&gt;&lt;!-- img --&gt;
          &lt;div class="img"&gt;
              &lt;img src="photos/400x300/image2.jpg"&gt;
          &lt;/div&gt;&lt;!-- img --&gt;
          &lt;div class="img2"&gt;
              &lt;img src="photos/300x400/image3.jpg"&gt;
          &lt;/div&gt;&lt;!-- img --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>the last image just doesnt display at all, i cannot fathom why this would be.</p>
  
  <p>You can look at the problem page at <a href="http://www.secretdorsetphoto.com/portfolio_devon.html" rel="nofollow">http://www.secretdorsetphoto.com/portfolio_devon.html</a></p>
  
  <p><strong>Update</strong>
  Okay so overriding the style in line as follows worked</p>
  
  <pre><code>&lt;div class="img" style="min-width:225px"&gt;
     &lt;img src="photos/300x400/Beer Rocks.jpg" alt="pfoto"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but creating a style just to override the problem setting</p>
  
  <pre><code>.project_img .img .portrait {
     min-width: 225px
  }
  </code></pre>
  
  <p>and using as </p>
  
  <pre><code>&lt;div class="img portrait"&gt;
     &lt;img src="photos/300x400/Beer Rocks.jpg" alt="pfoto"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>as described in the answer blow by Anly doesnt work for me</p>
  
  <p>Is the problem the multiple class syntax (class="img project") ?</p>
  
  <p>I cant do </p>
  
  <pre><code>&lt;div class="img"&gt;
     &lt;div class="portrait"&gt;
       &lt;img src="photos/300x400/Beer Rocks.jpg" alt="pfoto"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>because wouldnt that stop css defnitions firing because img is now directly within portrait class not img class</p>
  
  <pre><code>.progect_img .img img 
  </code></pre>