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 10x10 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 es 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 e on guys is there a better CSS solution?

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 10x10 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 es 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 e on guys is there a better CSS solution?

• javascript
• css
• cross-browser
• offset

4 Answers 4

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/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.

It is my opinion that Javascript is the most elegant solution.

The purpose of client-side scripting is for client-side interaction, which is exactly what you're trying to do.

This isn't an answer, per se, to your question "is there a better CSS solution," but I think Javascript is the better solution. A CSS solution would be hacky at best, and probably wouldn't work.

You could override the top and left styles being sent with the HTML by using !important in your stylesheet.

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

How about wrapping .container in a parent element positioned with the left and top values from your database?

Given that markup, you wouldn't need to know the left and top explicitly for your :hover effect on .container, so you could use fixed values as they will be determined based on the left and top of .container's offset parent.

For example, given this markup:

<div class="container-parent">
    <div class="container">
        ...   
    </div>
</div>

you'd need to position .container-parent using your top and left database values. From there, your CSS would look like:

.container-parent{
    left:224px; /* from DB */
    position: absolute;
    top:128px; /* from DB */
}

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

.container:hover
{
 width: 30px;
 height: 30px;
 top: -15px; /* new width / 2 to center box */
 left:-15px; /* new height / 2 to keep things centered */
}

Here, .container appears like it usually would at the left and top coordinates from your database, but on :hover shifts itself -15px to the left and top. Since it is inside a positioned parent, those new left and top values will be equal to your original values - 15px.

Is that what you're looking to do?