Jump to content

HTML Code for an Image to reveal text


MohammedW
 Share

Recommended Posts

Were you looking for something like this?

<!DOCTYPE html>
<html>
<style>

img {
  width: 500px;
}

.image-caption {
  display: none;
  width: 500px;
  background-color: cyan;
}
</style>
<body>
  <div class="image-caption-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"/>
    <div class="image-caption">
    This is a cat
    </div>
  </div>
  <div class="image-caption-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg"/>
    <div class="image-caption">
    This is a cat
    </div>
  </div>
</body>

<script>

function handleClick() {
  console.log(this.children[1]);
  toggleDisplay.call(this.children[1])
}

function toggleDisplay() {
  var x = this;
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

window.onload = function() {
  var containers = document.querySelectorAll(".image-caption-container");
  containers.forEach(function (container) {
    container.onclick = handleClick;
  });
};


</script>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...