Looking to add a circle behind the navigation words on hover in CSS
Question
Looking to add a circle behind the navigation words on hover in CSS.
I wanted to have the text knock out, and I think I can handle that part by making hover state text color to the background color.
However, the circle and preventing the sliding that happens from adding padding to the text on hover is something I dont fully understand.
My pen attempt at the navigation, but don't know how to add a circle like the attached image circle effect i am aiming for
http://codepen.io/danbenner/pen/QpazyB
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dan Benner </title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
<!--Fonts-->
<!--Headline Fonts-->
<!--Body Copy Fonts-->
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>
<body>
<!--
-->
<div id="nav_strip">
<!--Left Side of Nav-->
<div id="identity_container">
<img src="images/svgs/TypeTreatment.svg">
<a id="tagline" href="index.html">Strategic. Conceptual. Systematic.</a>
<!--End of Identity Container-->
</div>
<!--Right Side of Nav-->
<div id="nav_container">
<li> <a href="#">WORK</a> </li>
<li> <a href="#">PROCESS</a> </li>
<li> <a href="#">ABOUT</a> </li>
<span class="clearfix"></span>
</div>
<span class="clearfix"></span>
</div>
<!--
-->
</body>
2 answers
solution1
0 2017-03-19 16:07:16
You can make use of the border-radius and padding properties on the <a> tags.
For hover, use the background-colour property.
Add these styles and tweak the values to meet your needs:
#nav_container a {
padding:20px;
border-radius:100%;
}
#nav_container a:hover {
background-color:rgba(255,255,255,0.3)
}
When an <a> tag has hover triggered, it's background will be set to white with an opacity value of 0.3. Because of the padding and border-radius values set on the <a> tag it will appear circular.
solution2
0 ACCPTED 2017-03-19 16:20:43
Adding the following code to your CSS code will do the job.
#nav_container li a:hover{
background-color:rgba(255, 255, 255, 0.5);
border-radius: 100%;
}
#nav_container li a{
padding: 30px;
}
Test it here Link to CodePen
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.