is this possible through CSS3? or would I need javascript?

Question

Hey guys I just started messing around with hovering and images and pretty excited to have learned this.

I actually came on a problem with CSS3

I was wondering if all the other images can remain in tact without moving when I hover over them. Ive tried looking for something in CSS3 but nothing came out.

I have an image hovering up to 200px width and height. I was wondering if all the other images can stay fixed when the images get larger.

anyhow this is my CSS

*{
  margin: 0px;
  padding 0px;
}
body{
  background-image: url('http://pxwallpaper.com/wp-content/uploads/2013/08/barcelona-black-new-wallpaper-94.jpg');
  background-size:cover;


}

#container{
  width: 900px;
  height: 900px;
  background-color: white;
  margin: 60px auto;
  overflow:auto;
}


img.size{

  width:100px;
  height:100px;
  -webkit-filter:grayscale(90%);
  opacity:0.4;

}

#container ul{
  margin:70px 30px 6px 10px;
}

#container li{
  float:left;
  margin: 30px;
  list-style-type:none;
  cursor:pointer;
}



#container img:hover{
  filter:grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 2;
  width:200px;
  height:200px;
}

and my HTML

<html>
  <head>

  </head>
  <title>
  </title>
  <body>


    <div id="container">

      <ul>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrd
                rVfYtm4P73YEm9w"></li>
                <li><img class="size" src="http://kodiakherbal.com/wp-content/uploads/2013/03/canmore_rocky_mountains-hd-wallpaper.jpg"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>

      </ul>


    </div>



  </body>
</html>

this is also my site codepen.io/willc86/pen/BrEmt

user2805313
– user2805313

2014-01-28 23:12:14 +00:00
Commented Jan 28, 2014 at 23:12 — user2805313
– user2805313, Commented Jan 28, 2014 at 23:12

Damien Black · Accepted Answer · 2014-01-28 23:13:37Z

1

Here is the change you could make that would affect the least: change the hovering images margins so that the flow stays the same:

#container img:hover{
  filter:grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 2;
  width:200px;
  height:200px;
  margin: -50px; /*this will make the image seem to be 100px by 100px*/
}

Here is a working version of your site: http://codepen.io/anon/pen/Dsblw It just has the one line change margin: -50px.

answered Jan 28, 2014 at 23:13

Damien Black

5,65720 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon P Over a year ago

I'll leave my answer up but I prefer yours!

Jon P · Accepted Answer · 2014-01-28 23:21:21Z

1

I'd give your li the same width as the initial images and then ad position:abolute to the hover pseudo class

#container li{
  float:left;
  margin: 30px;
  list-style-type:none;
  cursor:pointer;
   width:100px;
  height:100px;
}

#container img:hover{
  filter:grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 2;
  width:200px;
  height:200px;
  position:absolute;
}

http://codepen.io/anon/pen/Ecuby

answered Jan 28, 2014 at 23:21

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

2 Comments

Damien Black Over a year ago

That makes them pop to the left and downward. I'm sure he want them coming out equally in all directions. Centered.

Jon P Over a year ago

@DamienBlack I wouldn't make that assumption, I'm just working off th OP example where they expand in that manner but move the surrounding elements and fixing it so the other elemetns don't move. Your solution is more apealing to me though.

Gabriele Petrioli · Accepted Answer · 2014-01-28 23:29:59Z

1

I would make the li be position:relative and have width and height of the image.

The img.size should be position:absolute and on hover adjust its size and margins to center it.

Using absolute positioning and removing it from the flow allows for many effects like transitions on the resize
Demo at http://codepen.io/anon/pen/EisIK

Also opacity goes from 0 to 1 .. so using 2 is the same as 1

Alternatively you could just use transform:scale(2); which does not affect the flow..
Demo at http://codepen.io/anon/pen/jkapL

answered Jan 28, 2014 at 23:29

Gabriele Petrioli

197k35 gold badges276 silver badges331 bronze badges

1 Comment

Damien Black Over a year ago

The alternative won't work in chrome or safari unless you also add -webkit-transform:scale(2);. IE9 requires -ms-transform:scale(2).

Collectives™ on Stack Overflow

is this possible through CSS3? or would I need javascript?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related