JIMMY JIMMY - 5 months ago 12
Javascript Question

how to add 'more info' link inside image and display the content within the image size

I want to add more info link inside an image and when I click on it i want the description of the image to be displayed within the image area.

normal image

When user hover mouse on in it should show more info option. more info link

When user selects more info, description should appear within the image description of the image

and back to normal when clicks outside the image.

code:

<div class="content"><img id="adj" src="images/Chrysanthemum.jpg" alt="Chrysanthemum" width="300" height="200"><a href="#">more info</a></div>


i want to force the more info inside the image's bottom right corner.

Answer

Use some CSS to do the trick:

(But it's not with click, instead it's with hover)

div {
  position: absolute;
}
div:hover a {
  display: block;
}
img {
  position: relative;
}
a {
  right: 10px;
  position: absolute;
  bottom: 10px;
  display: none;
  color: #ffffff;
  text-decoration: none;
  font-family: cursive;
}
a:hover + span,
span:hover {
  display: block;
}
span {
  top: 10px;
  position: absolute;
  display: none;
  left: 10px;
  padding: 10px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background: rgba(255,255,255,0.7);
  overflow: auto;
  font-family: sans-serif;
}
<div class="content">
  <img id="adj" src="http://placekitten.com/400/120" alt="Chrysanthemum">
  <a href="#">more info</a>
  <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
</div>`

Comments