Using CSS, how do you create larger elements when the mouse is over them?

Question

The effect seen is that the boxes increase in size when the mouse is over them, and there is a drop shadow too.

When the mouse is not over the boxes, they go back to the same size with no drop shadow.

Normal:

Mouse over:

Scroll over the boxes to see the effect here.

Answer 1

jsFiddle DEMO

Hovering over elements and making them larger can be done in many ways, and it depends on your layout requirements and the framework your using.

Since those boxes appear to be div's with CSS3 box shadow property, you can do something like that in pure CSS using :hover

HTML:

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

CSS:

body {
  background-color: black;
}

.box {
  background-color: grey;
  width: 200px;
  height: 400px;
  float: left;
  border: 6px solid red;
  margin: 10px;
}

.box:hover{
  width: 250px;
  /* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
  height: 452px;
  /* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
  /* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
  /* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
  margin-top: -18px;
 -moz-box-shadow:    0 0 50px red;
 -webkit-box-shadow: 0 0 50px red;
 box-shadow:         0 0 50px red;    
}

---

EDIT 2:

Revised jsFiddle DEMO

Answer 2

You can accomplish this using "transform: scale(x,y)" to zoom your element.

E.g.

 div:hover{
 transform: scale(1.5, 1.25);
 -moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}

will zoom your div by 1.5 times on x-axis and keep 1.25 times on y-axis.

To add shadow -

div:hover{
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}

Answer 3

This is easily accomplished with some HTML and CSS. They're commonly called "Dropdown" menus or "pop-out" menus and there are tons of tutorials on how to make them; here's one:

http://www.seoconsultants.com/css/menus/tutorial/