Question

I have a rather interesting problem, and wondered if it could be done purely in CSS. I know you can use webkit moz transforms, or javascript, but is there another simple CSS cross browser solution to this?

I have a box with a class container say

.container
{
 position: absolute;
 border: black 1px solid;
 top: 100px;
 left:100px;
 width: 10px;
 height: 10px;
}

Now what I want to do is on mouseover (CSS hover) is enlarge the box to 30px by 30px around a central point somewhere in the approximate centre of the 10×10 box, returning to the original container when I mouse out. Something along the lines of:

.container:hover
{
 width: 30px;
 height: 30px;
 top: 90px;
 left:90px;
}

Now the difficulty comes in that the top and Left positions are set into the HTML being sent from the database, and therefore do not appear in the CSS file.

The option is that I dynamically generate the CSS file from the DB data, and effectively create a class for every object (I really think this is a bad idea) or I use Javascript to manage some calculation onmouseover and onmouseout but this strikes me as being not very elegant. It’s what I’m doing now. eeeugh.

So come on guys is there a better CSS solution?

Answer 1

If it just the top/left then you can ignore those and use the margins to move them around (provided that you know the dimensions)

.container:hover
{
 width: 30px;
 height: 30px;
 margin-left:-10px;
 margin-top:-10px;
}

demo http://jsfiddle.net/gaby/CuuNW/

---

The important calculation is that the margin need to match the half of the size increase that occurs on hover.

so, 30 pixel final size minus 10 pixel initial size is 20 pixels. You need to offset (using margins) 20/2 = 10 pixels.