clickable figcaption link on top of image Wordpress

user_6548020 0
Viewed 2874

I'm helping a friend setting up a Wordpress page and I have an issue that I can't figure out how to fix.

I have added some image widgets to the sidebar that links to different categories on the site. The problem is that the image text should be on top of the image in a semi transparent box, and this box is not a clickable link. Is it possible to add the same link to the box?

The widget generates an HTML structure like shown in the example below and I have added some CSS to show how the semi transparent text box looks like.

figcaption {
  position: relative;
  height: 80px;
  width: 300px;
  background: white;
  top: -235px;
  left: 85px;
  padding-top: 60px;
  text-align:center;
  opacity: 0.8;
  font-weight: bold;
  font-size: 140%
}
<figure>
  <a href="some link">
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg">
  </a>
  <figcaption>Super Mario</figcaption>
</figure>

wordpress hyperlink css html javascript
2 Answers

Appearance > Customise > Additional CSS

figcaption
{
    cursor: pointer;
    pointer-events: none;
}
user_21147370
Related