CSS: Getting images overlay to play nicely with TinyMCE output

[onjegolders]

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" />');
});

[onjegolders]

Hmmm think I may have it:

$(window).load(function() {

$("span.overlay").css('width', function() {
   return $("a.fancy img").outerWidth();
});

$("span.overlay").css('height', function() {
   return $("a.fancy img").outerHeight();
});

});

Quite chuffed with myself though I'm sure there are much simpler, more effective ways! Would be interested in seeing if anyone has anything easier to implement?

Thanks!

[onjegolders]

Actually, don't think it's working that well....

There must be a better way of doing this!

I think now my overlay sizes are getting set but it's getting set by the first image not the closest.

Think I may just have to drop this one!

[Soma]

Works fine if I leave out the extra div wrapper and add one line to the css to make the link tag display:block;

http://jsfiddle.net/pJA9M/4/

Maybe also consider using such a tool like jsfiddle to post problems like this, as it's easier for one to have a look. Avoid posting code that much

Another try: http://jsfiddle.net/pJA9M/10/

[onjegolders]

Works fine if I leave out the extra div wrapper and add one line to the css to make the link tag display:block;

http://jsfiddle.net/pJA9M/4/

Maybe also consider using such a tool like jsfiddle to post problems like this, as it's easier for one to have a look. Avoid posting code that much

Another try: http://jsfiddle.net/pJA9M/10/

Thanks so much for that Soma! Looks great but I have no idea if this ought to work with responsive images?

You're right about jsfiddle - I do use it, have been today but I often use simpler examples on it and then go back to my bloated code in ST2 after!

[onjegolders]

Can't seem to get this working on my responsive images. But thanks for the help Soma

[onjegolders]

Finally ended up going with a nice plugin (not free) http://demo.wpthemers.net/thumbfx/

The problem still comes about when the overlay's widths are coming off of the "span's" in Twitter Bootstrap rather than the image but I find if I don't set the widths and let the spans take care of it, it all seems to play nicely.

This is the sort of thing that takes me aggggges to get my head around but I hope to learn it all for myself one day but for now a plugin works well!