Preciso que ao clicar neste link <a class="close" href="#">×</a>
minha figure
fique invisível. Utilizando apenas CSS
.
CSS
figure.pop-up-principal {
position: fixed;
width: 100%;
max-width: 430px;
max-height: 283px;
height: auto;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
}
figure.pop-up-principal img{
position: absolute;
width: 100%;
max-width: 430px;
max-height: 283px;
height: auto;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: white;
border-radius: 10px;
border: 5px solid #9AD3DE;
box-sizing: border-box;
z-index: 0;
overflow: hidden;
}
.close{
float: right;
width: 25px;
height: 25px;
line-height: 25px;
font-size: 25px;
border-radius: 50%;
color: black;
border:2px solid #EF9A9A;
background-color: red;
text-align: center;
position: relative;
z-index: 100;
margin-right: 5px;
margin-top: 6px;
text-decoration: none;
}
HTML
<figure class="pop-up-principal">
<a class="close" href="#">×</a>
<a href="http://www.bmimplantes.com.br" target="_blank">
<img src="./imagens-pop-up/drbrunomachado.jpg">
</a>
</figure>