How do I get the side of div to curve on hover? The div is like this before I move the point over it:
And when I move the point over the div,it like this:
How should I write the HTML and CSS code?
-
2Show us what you have tried so far and we will be able to help.Aslam– Aslam2017-10-26 09:35:24 +00:00Commented Oct 26, 2017 at 9:35
-
Possible duplicate of Rounded side, not rounded cornersThomas– Thomas2017-11-30 15:45:26 +00:00Commented Nov 30, 2017 at 15:45
Add a comment
|
1 Answer
I actually like this question; but, I am assuming you are talking about the white area. This is a great place for a number of very basic CSS style rules, starting with simple (border-radius and hover).
For the following approaches, assume the below HTML structure:
<div id="container">
<div> content </div>
</div>
If you are looking for a basic, un-animated transition from straight to curved, you might consider the following CSS approach (your may need to apply a particular web-kit to ensure cross-browser uniformity):
#container:hover {
border-top-left-radius: 100% 50px;
border-top-right-radius: 100% 50px;
}
Above is what is known as "slash syntax"; however, it is sort of shorthand: no slash is present (consult MDN footnotes). The second value is the "vertical radius". In the above case, for a symmetrical look, both value pairs must match for both -right and -left.