You can create a floating shadow on an element using CSS hover selector and box-shadow property.
Here’s an example:
CSS:
```
.shadow {
transition: all 0.3s;
cursor: pointer;
width: 200px;
height: 200px;
margin: 20px;
box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
}
.shadow:hover {
transform: translate(0px, -10px);
box-shadow: 0px 30px 20px rgba(0,0,0,0.2);
}
```
HTML:
```
Explanation:
In this example, the div with class “shadow” will have a slight shadow once the page is loaded, it will appear as if it’s floating above the surface once you hover over it. The box-shadow property is used to add the shadow effect and the transform property with translate value is used to create the “lift” effect when hovering. The transition property is used for making the hover effect smooth.
Feel free to modify the values for box-shadow and transform depending on your requirements.
