Home/ Questions/Q 7434599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:55:09+00:00

I was trying to do some hover effects like on nvidia page ( http://www.nvidia.com/object/cool_stuff.html

  • 0

I was trying to do some hover effects like on nvidia page ( http://www.nvidia.com/object/cool_stuff.html ) in css3, the result is here http://www.html5.ssl2.pl/ . Now as you can see it doesn’t work well – when you will hover one div, all others will move and there is also a problem with border (giving more space)

Code:

<html>
<head>
<style>
body{
background: #eee;
margin:0;
padding:0;
}

div.nowy{
position:absolute;
width:200px;
height:100px;
background:grey;
border: 0px solid #eee;
-moz-transition: border 0.2s, box-shadow 0.2s;
-webkit-transition: border 0.2s, box-shadow 0.2s;
 box-shadow: 1px 3px 3px black;
}

div.nowy:hover {
border:5px solid white;
box-shadow: 0px 2px 6px black;
}
</style>
</head>

<body>
<div style="width:800px; height:300px; margin-top:50px; margin-left:50px; position:relative">
<div class="nowy" style="left:100px;"></div>
<div class="nowy" style="left:350px;"></div>
<div class="nowy" style="left:600px;"></div>
</div>
</body>

Any idea how to fix that?
Thanks for help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this – http://jsfiddle.net/t2UCW/2/

    body{
    background: #eee;
    margin:0;
    padding:0;
    position: relative;
}

div.nowy{
    position: absolute;
    margin-left:10px;
    float:left;
    width:200px;
    height:100px;
    background:grey;
    border: 0px solid grey;
    -moz-transition: border 0.5s, box-shadow 0.5s, top 0.5s, left 0.5s;
    -webkit-transition: border 0.5s, box-shadow 0.5s, top 0.5s, left 0.5s;
     box-shadow: 1px 3px 3px black;
}

div.nowy:hover {
    border:5px solid white;
    box-shadow: 0px 2px 6px black;
}

.d1, .d2, .d3 { top: 20px; }
.d1 { left: 50px; }
.d2 { left: 300px; }
.d3 { left: 550px; }

.d1:hover, .d2:hover, .d3:hover { top: 15px; }
.d1:hover { left: 45px; }
.d2:hover { left: 295px; }
.d3:hover { left: 545px; }
    • 0