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=".jpg">
  </a>
  <figcaption>Super Mario</figcaption>
</figure>

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./wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg">
  </a>
  <figcaption>Super Mario</figcaption>
</figure>

• javascript
• html
• css
• wordpress
• hyperlink

• why can you put figcaption inside the <a> tag? jsfiddle/qzjgvLfy – Grasper Commented Aug 2, 2017 at 18:00
• Hey Grasper This HTML is automatically generated by Wordpress and I can't seem to find, where I can edit it. Is it possible to do somewhere? Because that would be an easy fix :) – Mewb Commented Aug 2, 2017 at 18:06
• If you can't change the html, you could do it with javascript. Is that an option? – JakeParis Commented Aug 2, 2017 at 18:09
• create a custom widget and use that instead wpbeginner./wp-tutorials/… – Grasper Commented Aug 2, 2017 at 18:14
• Thanks for the advice Grasper! – Mewb Commented Aug 2, 2017 at 19:46

2 Answers 2

Appearance > Customise > Additional CSS

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

If you can't change the html, you'll have to use javascript/jquery to achieve this. In the WordPress widget manager, create a new plain text widget and paste this in:

<script>
jQuery(function($){
  var $sidebar = $('.sidebar'); // change this selector to target your sidebar
  $sidebar.find('figcaption').on('click',function(e){
    e.preventDefault();
    $(this).parents('figure').eq(0).find('a').click();
  });
</script>

Or, to prevent Wordpress from adding <p> put it all on one line:

   <script>jQuery(function($){var $sidebar = $('.sidebar'); $sidebar.find('figcaption').on('click',function(e){e.preventDefault();$(this).parents('figure').eq(0).find('a').click();});</script>