0

Im trying to make modifications to a html template I purchased.

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

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

and the html would use as follows:

<div class="progect_img">
    <div class="img">
        <img src="photos/400x300/image1.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/400x300/image2.jpg">
    </div><!-- img -->
  </div>
</div>

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.

<div class="progect_img">
    <div class="img">
        <img src="photos/400x300/image1.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/400x300/image2.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/300x400/image3.jpg">
    </div><!-- img -->
  </div>
</div>

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.

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

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

and change my webpage to

<div class="progect_img">
        <div class="img">
            <img src="photos/400x300/image1.jpg">
        </div><!-- img -->
        <div class="img">
            <img src="photos/400x300/image2.jpg">
        </div><!-- img -->
        <div class="img2">
            <img src="photos/300x400/image3.jpg">
        </div><!-- img -->
      </div>
    </div>

the last image just doesnt display at all, i cannot fathom why this would be.

You can look at the problem page at http://www.secretdorsetphoto.com/portfolio_devon.html

Update Okay so overriding the style in line as follows worked

<div class="img" style="min-width:225px">
   <img src="photos/300x400/Beer Rocks.jpg" alt="pfoto">
</div>

but creating a style just to override the problem setting

.project_img .img .portrait {
   min-width: 225px
}

and using as 

<div class="img portrait">
   <img src="photos/300x400/Beer Rocks.jpg" alt="pfoto">
</div>

as described in the answer blow by Anly doesnt work for me

Is the problem the multiple class syntax (class="img project") ?

I cant do 

<div class="img">
   <div class="portrait">
     <img src="photos/300x400/Beer Rocks.jpg" alt="pfoto">
   </div>
</div>

because wouldnt that stop css defnitions firing because img is now directly within portrait class not img class

.progect_img .img img
Paul Taylor
  • 13,411
  • 42
  • 184
  • 351

2 Answers2

0

It may not be able to recognize img2. Try using this in your CSS to replace img2

progect_img:nth-last-child(odd) {...}

and see if it fixes your problem.

Replace this

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

with this

.progect_img:nth-last-child(odd) {
float: left;
width: 33%;
overflow: hidden;
text-align: center;
margin: 0 0 6% 0;
max-height: 300px;
cursor: pointer;
line-height: 300px;
position: relative;
}

and anything with 

img2

make

nth-last-child(odd)
0

I would try and avoid removing the classes used in the template. So instead of removing the class "img" from the divs and replacing it with "img2", why not just add a class, for example "tall" or "ratio-3-by-4". Then you can write a few lines of css to "fix" the image being stretched. The new css selectors should be more specific than the existing ones, so they should take effect and override the desired properties.

Your html will look like this:

<div class="progect_img">
    <div class="img">
        <img src="photos/400x300/image1.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/400x300/image2.jpg">
    </div><!-- img -->
    <div class="img tall">
        <img src="photos/300x400/image3.jpg">
    </div><!-- img -->
  </div>
</div>

Your css will look like this:

/* ... the original css ... */

.project_img .img.tall {
    max-height: 400px;
    /* seems these are needed, but I'm not sure:
     line-height: 400px;
     max-width: 300px;
    */
}

edit: Do note that there is no space between .img and .tall in the selector

If you get the selectors right (i.e. they match the desired elements), but for some reason things still don't work, then you can try adding !important What does !important in CSS mean? .
Here is the same css with the added !important:

/* ... the original css ... */

.project_img .img.tall {
    max-height: 400px !important;
    /* seems these are needed, but I'm not sure:
     line-height: 400px !important;
     max-width: 300px !important;
    */
}



I haven't actually tested anything, so sorry about that.

Community
  • 1
  • 1
Anly
  • 312
  • 3
  • 11
  • I wasnt removing .img just adding .img2 – Paul Taylor Oct 25 '15 at 17:09
  • the last html you included had it removed, so I worked from there – Anly Oct 25 '15 at 17:38
  • Thanx your approach gave me the idea for a workaround but I couldnt get your neater method quite working, Ive updated my question if you could possibly take a look – Paul Taylor Oct 26 '15 at 13:14
  • Why do you think this would solve the problem, and why do you think the OP's original appoach didn't work? –  Oct 26 '15 at 13:32
  • @torazaburo because my solution does work - look at the last few images and do view source of http://www.secretdorsetphoto.com/portfolio_closeup.html whereas using the extra css style in the css didnt work. – Paul Taylor Oct 26 '15 at 13:44
  • @PaulTaylor I read the edited question. You are in the correct direction. The problem you have (now) is that the multiple class syntax is without a space: `.img.img2` and NOT `.img .img2` So just fix it and it should work like the "inline styles" solution – Anly Oct 26 '15 at 15:30
  • @torazaburo I imagine that there are other things in the template that use the class `img`. Perhaps duplicating the mentioned css for `.img2` is not enough. By keeping `.img` and **adding** a custom class to allow overriding of some properties (width and height), the OP can avoid weird problems. – Anly Oct 26 '15 at 15:49
  • I didnt realzie the dot was intentional, but nevertheless it still doesnt work for me. – Paul Taylor Oct 26 '15 at 16:23
  • @PaulTaylor are you sure you have correct css selectors now? If they are fine but it still does not work, then perhaps they are not "specific enough" to take precedence. You can play with them to make them more specific (tedious), or better, just add !important at the end of the css properties statements. See my edited answer. – Anly Oct 26 '15 at 18:50