I need a help in CSS, I have my merry-go-round and I need a hover to appear a centralized link, currently I have already left as I want with hover that is, hover is on top of the image, follow the link .
Hover is a white background with opacity and link .
I do not know if I understood correctly, but with CSS you can do it like this:
.circulo{
height:200px;
width:200px;
border-radius:50%;
background:red;
position:relative;
}
#texto-inside{
display:none;
}
.circulo:hover{
opacity:0.7;
}
.circulo:hover #texto-inside{
display:block;
position:absolute;
top:35%;
left:30%;
font-size:20px;
color:white;
}<div class="circulo">
<p id="texto-inside">Macarrão</p>
</div>Then you edit the way you want, put a link in place of my p, a transform in the text and such.