How do I click on a link and make an element invisible using only CSS?

Question

How do I click on a link and make an element invisible using only CSS?

Navigation

#1 by (0 votes)

0

I need to be invisible by clicking on this link with my <a class="close" href="#">×</a> . Using only figure .

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="#">&times;</a>
    <a href="http://www.bmimplantes.com.br" target="_blank">
    <img src="./imagens-pop-up/drbrunomachado.jpg">
    </a>
</figure>

css

asked by anonymous 24.07.2017 / 16:10

1 answer

Saving file on the server infinite scroll with angled problem loading DB data

score 0 · Answer 1

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;
}

body {
  display: block;
}
.link:focus ~ .pop-up-principal {
  display: none;
}

<a class="link" href="http://www.bmimplantes.com.br" target="_blank">Link</a>

<figure class="pop-up-principal">
    <a class="close" href="#">&times;</a>
    
    <img src="./imagens-pop-up/drbrunomachado.jpg">
    </a>
</figure>

I made the following changes: 1st I removed the tag a from within the figure tag; 2nd added a class named 'link' to the link to be clicked; I added CSS to hide figure by clicking on the class element named 'link'.