Jump to content

Search the Community

Showing results for tags 'image overlay'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome to ProcessWire
    • News & Announcements
    • Showcase
    • Wishlist & Roadmap
  • Community Support
    • Getting Started
    • Tutorials
    • FAQs
    • General Support
    • API & Templates
    • Modules/Plugins
    • Themes and Profiles
    • Multi-Language Support
    • Security
    • Jobs
  • Off Topic
    • Pub
    • Dev Talk

Product Groups

  • Form Builder
  • ProFields
  • ProCache
  • ProMailer
  • Login Register Pro
  • ProDrafts
  • ListerPro
  • ProDevTools
  • Likes
  • Custom Development

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. Hi guys, bit off topic here but struggling with a CSS problem. I've been trying to add an overlay on hover to the images around my site which lead to a fancybox. I'm using a responsive framework so it's not all that easy but I've just about managed it in my templates by making the overlay png sizes fit the different breakpoints in the template and it works nicely. My problem is I'm now trying to fit the overlay to images added by the client in TinyMCE. I'm successfully adding the span.overlay using Jquery but I've no idea how to limit the size of it to the size of the image as I have no overall control as to the dimensions. I've attached a screenshot to show my problem. Has anyone else managed to display an overlay in images coming out of their TinyMCE fields? Here's my HTML code: <a class="fancy" rel="<?php echo $page->title; ?>" href="<?php echo $image->url; ?>" title="<?php echo $image->description; ?>"> <div class="overlay_link <?php echo $class; ?>"> <img src="<?php echo $image->size(370, 247)->url; ?>" alt="<?php echo $image->description; ?>" /> <span class="overlay"></span> </div> </a> And the CSS: .overlay_link { position: relative; } .overlay_link img { } .overlay { /*black(ish) overlay*/ /* background: #111; background: rgb(34, 34, 34); background: rgba(34, 34, 34, 0.8); */ /*orange overlay*/ background: #d87b37; background: rgb(216, 123, 55); background: rgba(216, 123, 55, 0.8); background: url(images/patterns/overlay.png) center center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; position: absolute; top: 0; left: 0; width: 370px; height: 247px; max-width: 100%; max-height: 247px; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .overlay_link:hover .overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } And the JS $(document).ready(function() { $(".body_copy a:has(img)").addClass('fancy').attr({ rel: pageName, title: function() { return $(this).find("img").attr("alt"); } }); }); $(document).ready(function() { $('a.fancy').each(function() { $(this).find('img').wrapAll('<div class="overlay_link" />'); }); $(".body_copy img").after('<span class="overlay" />'); });
×
×
  • Create New...