Overlay issue

  • Resolved Dave

    (@dvaer)


    10 years, 10 months ago

    Hi,

    This plugin is exactly what I need, but I have a styling issue with the overlay effect.

    I’d like to position the credits-overlay div over the image and I’m comfortable with the CSS for that. But my problem is that the credits-overlay div is outside the attachment div, which makes it impossible to position it relative to the attachment div.

    Is there a way to get the overlay div inside the attachment div?

    Below is some example code from my site.

    <div id="attachment_97" class="wp-caption alignnone" style="width: 406px">
<a class="img" href="/wp-content/uploads/2014/01/image.jpg">
<img class="size-full wp-image-97" width="400" height="600" src="/wp-content/uploads/2014/01/image.jpg" alt="">
</a>
<p class="wp-caption-text">Caption text</p>
</div>
<div class="credits-overlay" data-target=".wp-image-97">
<a href="#credit-link">Credit Name</a>
</div>

    Big thank you for any help.

    https://www.ads-software.com/plugins/better-image-credits/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Dave

    (@dvaer)

    Clarification:

    So instead of this output:

    <div id="attachment_97" class="wp-caption alignnone" style="width: 406px">
     <a class="img" href="/wp-content/uploads/2014/01/image.jpg">
          <img class="size-full wp-image-97" width="400" height="600" src="/wp-content/uploads/2014/01/image.jpg" alt="">
     </a>
     <p class="wp-caption-text">Caption text</p>
</div>

<div class="credits-overlay" data-target=".wp-image-97">
     <a href="#credit-link">Credit Name</a>
</div>

    Is it possible to get this output:

    <div id="attachment_97" class="wp-caption alignnone" style="width: 406px">
     <a class="img" href="/wp-content/uploads/2014/01/image.jpg">
          <img class="size-full wp-image-97" width="400" height="600" src="/wp-content/uploads/2014/01/image.jpg" alt="">
     </a>
     <p class="wp-caption-text">Caption text</p>

     <div class="credits-overlay" data-target=".wp-image-97">
          <a href="#credit-link">Credit Name</a>
     </div>
</div>

    Thanks again ??

    Thread Starter Dave

    (@dvaer)

    I’m unsure what was happening, but updating the plugin to version 1.1 seems to have solved the issue.

    The credits-overlay code is now placed at the bottom of the page just before the closing </body> tag. Then some javascript places it over the image, which is perfect for me.

    I may have seen a caching issue when I first installed the plugin. Or the plugin author may have addressed the issue. I don’t know. Anyway it works for me now, so thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Overlay issue’ is closed to new replies.