Scaling images relative to users screen-size using jQuery

Question

I know similar questions have been answered before but I could not find exactly what I was looking for.

I'm trying to recreate the footer images on this page. I have the hover effect done already but I'm having trouble getting the images to scale to the same size as the ones on that website.

Would anybody have any ideas of how to get the images looking exactly the same?

Here's what I have in jsdfiddle (For some reason the hover effects doesn't work in jsfiddle). The code below is what I'm using for the ho

$(".img_Fade").hover(
  function () {
    $(this).fadeTo("slow" , 1);
  },
  function () {
   $(this).fadeTo("slow" , .5);
  }
);

You should post your relevant code together with your fiddle — Mathias, Mar 18 '14 at 12:50
This website is for help with coding, not for everyone to do your homework for you. — ORION, Mar 18 '14 at 12:50
This isn't "homework" and as far as I know jquery is code? I'm simply asking if anybody knows of a method to do what I need. — user3432884, Mar 18 '14 at 12:53

score 0 · Accepted Answer · answered Mar 18 '14 at 12:58

0

I added jQuery to your fiddle (which is why the fading didn't work) and added overflow: hidden to your three <div> elements. That will hide the overflowing part of the image.

Do you also need them to scale with the screen height?

http://jsfiddle.net/borglinm/3fmPU/1/

answered Mar 18 '14 at 12:58

Mathias

5,642
2
31
46

Thanks, thats great. I was hoping to get them exactly like the images on the website I linked. Scaling for both height and width. – user3432884 Mar 18 '14 at 13:15

score 0 · Answer 2 · answered Mar 18 '14 at 12:59

use the following css:

.insideDiv1:hover, .insideDiv2:hover, .insideDiv3:hover{
opacity:1.0;
}

.insideDiv1{ background-color: blue;}
.insideDiv2{ background-color: orange;}
.insideDiv3{ background-color: green;}

.insideDiv1, .insideDiv2,.insideDiv3 {
  opacity:0.5;
  float: left;
  background-color: blue;
  width: 33%;
  height: 100%;
  border: 0px;
  margin: 0px;
  padding: 0px;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

Hope this helps..

risk · Answer 3 · 2014-03-18T13:18:07.737

0

You don't need javascript/jquery :

here is your updated fiddle => http://jsfiddle.net/LxcVv

I just added a hover state on your .img_fade class like that, and used css transition :

.img_Fade {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    width: 100%;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    -webkit-backface-visibility: hidden; /* to fix chrome moving image issue */
}

.img_Fade:hover {
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

(I also set image width to 100% to make them fit their containers)

edited Mar 18 '14 at 13:18

answered Mar 18 '14 at 12:59

risk

908
10
20

Wow, that is certainly much handier. However, I'm now noticing that the center image shifts slightly to the left now whenever any of the images are hovered over. Any significant reason for this? – user3432884 Mar 18 '14 at 13:09
Fixed : http://jsfiddle.net/LxcVv/ - this is a chrome issue that you can easily fix adding `-webkit-backface-visibility: hidden;` to your image class : see http://stackoverflow.com/a/16833496/2320186 (I edited my answer) – risk Mar 18 '14 at 13:17

Scaling images relative to users screen-size using jQuery

3 Answers3