0

This is now the second project I have worked on where I am unable to get the image that is hidden on load to display: block on :active. I have also tried to used visibility with no luck. I prefer the display so the height is not left empty.

a {
  text-decoration: none;
}

.button-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
}

.img {
  display: none;
}

.buy-button {
  background-color: #087900;
  border-radius: 25px;
  color: #ffffff;
  text-align: center;
}

h2 {
  padding: 12px 40px;
  font-size: 18px;
  font-family: Open Sans;
  font-weight: normal;
}

.img:active {
  display: block;
}

.buy-button:active {
  height: 10px;
  margin-top: 50px;
  margin-left: 0;
  margin-right: auto;
  width: auto;
}

h2:active {
  display: none;
}
<div class="img"><img src="https://sf-static.sixflags.com/wp-content/uploads/icon-coaster-car-person.png"></div>
<div class="button-container">
  <div class="buy-button">
    <h2>Buy Now</h2>
  </div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Melissa-Ann Dailey
  • 1
  • 1
    If the element starts as `display:none` then you cannot make it active as it doesn't show on the screen to start with. How can I make an invisible element active? There is nothing to hover over, click on, etc... – takendarkk Aug 10 '21 at 20:44
  • Thank makes sense. Do you have a suggestion for how to hide an element, then show on click/hover? – Melissa-Ann Dailey Aug 10 '21 at 23:15

1 Answers1

0

i don't think it is possible to do that. because a element become active when you click on it, but in this case at first place you set the image's display to none

.img {
    display: none;
  }

so there is no image on the page that user can click on it and the image's display become block.

you can put the image inside a div and make the image hidden and put border around div so user can see the div and when click inside the div, image become visible. or yo can put button and use JS for hide and show the image

Amir mohammad
  • 1
  • 1
  • I should have been more clear, I was hoping if you clicked on the button, it would flatten and then the little rollercoaster icon would show up and I could animate to zoom off. I just started to play around with opacity. Would putting it in the same div as the button help, then it would be active when clicked? – Melissa-Ann Dailey Aug 10 '21 at 23:21
  • i think it's better to use JS for this project. you can hide and show elements easily with js – Amir mohammad Aug 10 '21 at 23:29
  • That makes sense, I am work on that idea now... using a div then styling the right layers of that. The codepen is some what closer but still feels a bit like a duck tape solution. – Melissa-Ann Dailey Aug 10 '21 at 23:44
  • Ok, thank you for your help. JS was way easier. I was trying to only use css but that was getting messy. – Melissa-Ann Dailey Aug 11 '21 at 00:48