Rollovers with overlay download icon

I’ve tried but failed so far. The theme I’m using has the exact same rollover effect. I tried inserting the same span statement into the plugin file just before the closing </a> but it did nothing. Bit lost as to what to try next.

Hi Frodo,

Firstly, I’d strongly discourage modifying the plugin. If you go this route, you’ll lock yourself out of getting future plugin updates or have to re-implement with each update.

Instead, I’d suggest using the Filter HTML Output functionality documented in the Installation tab.

However, beyond that, I won’t be of much help. CSS is so not my strong suit. If you have an example of it working in your theme, the best advice I can give is to duplicate that.

-Dan

Thanks Dan. I’ve not properly looked into that so I will now. Good advice I think (having fallen foul of that before!)

Hi fr0d0!

Here’s some code snippet. You should paste it into the end of Your active WordPress theme’s functions.php file:

function dg_rollover_js() { ?>
<script type="text/javascript">
   jQuery(document).ready( function(){
      jQuery( '.document-icon img' ).wrap( '<span></span>' );
   } );
</script>
<?php }
add_action( 'wp_print_footer_scripts', 'dg_rollover_js' );

function dg_rollover_css() {
   echo <<<EOT
<style>
   .document-icon > a > span {
      position: relative;
      display: inline-block;
   }
   .document-icon > a:hover > span:before {
      content: '\\f504';
      font: normal 30px/1 'dashicons';
      top: 50%;
      left: 50%;
      display: block;
      position: absolute;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -webkit-font-smoothing: antialiased;
   }
   .document-icon > a:hover img {
      opacity: 0.3;
      filter: alpha(opacity=30);
   }
</style>
EOT;
}
add_action( 'wp_head', 'dg_rollover_css', 100 );

Please let us know if there is any resemblance with Your concept.

Don’t hesitate to ask if you run into any further questions!

PS: If You’ve found our answers useful, please rate our efforts. Thanks!

Fantastic! Thank you so much for that! ??

I think the centre icon is displaying behind the thumbnail? It’s live at the moment on my site if you want to see what I mean.

Ok ignore that – worked out how to enable dashicons in the frontend!

Yes that’s exactly what I’d envisioned thank you.

Just a note… on my site I have :

div.document-icon img:hover {
opacity: 0.3 !important;
}

set in custom css, and the opaque effect doesn’t seem to work without that.

Hi fr0d0!

Please accept our congratulations upon adoption of suitable method and that You’ve figure out how to adjust it to Your specific needs and environment.
The icon was placed in front of the images only on mouse hover, the rest of the time it is non-existent.
The problem with opacity could show up because of some misfit with used theme and/or other plugins.
In fact this approach (with a little tweak) can be used to display any image on top of the desired object.

Don’t hesitate to ask if you run into any further questions!

PS: If You’ve found our answers useful, please rate our efforts. Thanks!

Loving it demur! ??

Ah I see about the opacity. Glad it will work for others without modification.