Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it?
If you need to see the code and the issue I'm describing, here it is:
p {
font-size: 45px;
padding: 142px 0;
border-radius: 10px;
outline: 0;
}
p:hover {
color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 0);
}<div class="container painting-container">
<div class="row">
<div class="border-box col-xs-12 col-sm-12 col-md-6">
<a href="#">
<div class="box-image canvas-main">
<P>CANVAS</P>
</div>
</a>
</div>
<div class="border-box col-xs-12 col-sm-12 col-md-6">
<a href="#">
<div class="box-image wood-main">
<P>WOOD</P>
</div>
</a>
</div>
</div>
</div>