Search the Community
Showing results for tags 'image overlay'.
-
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" />'); });
- 6 replies
-
- image overlay
- tinymce
-
(and 1 more)
Tagged with: