When hovering over the mouse, the background color changes to black. However, I would like to remove the black border and have the icon displayed as a circle.
.our-activity-div {
padding: 20px;
text-align: center;
}
.our-activity-inner {
width: 33%;
box-sizing: border-box;
display: inline-block;
}
.fundraising {
max-width: 75%;
min-height: 220px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border-radius: 10px;
margin: 0 auto;
line-height: 0px;
padding: 30px 35px;
box-sizing: border-box;
}
.fundraise-hr {
width: 25%;
border-color: #000;
}
.fundraise-padding {
text-align: left;
padding-top: 20px;
}
.fundraising-parag {
padding: 10px 5px;
line-height: 1.5em;
}
.symbol0 {
color: #000;
font-size: 100px;
position: relative;
top: -28px;
border-radius: 50%;
}
.fundraising:hover .fundraise-padding {
color: #01d262;
}
.fundraising:hover .fundraise-hr {
border-color: #01d262;
}
.fundraising:hover .symbol0 {
background-color: #000;
color: #01d262;
}<div class="our-activity-div">
<div class="our-activity-inner">
<div class="fundraising">
<span class="symbol0">☯</span>
<h2 class="fundraise-padding ">Fundraising</h2>
<hr class="fundraise-hr "></hr>
<p class="fundraising-parag">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
</p>
</div>
</div>
</div>