Images with overlay

Question

I have some images in a container that I would like to add an overlay and an icon. This doesn't work out of the box, but I found some code that helped:

HTML:

<div class="main">
    <span class="featured"><img src="http://joshrodg.com/IMG_001-258x258.jpg" title="" alt=""></span>
</div>

CSS:

.featured {
    display: inline-block;
    margin: 30px 20px 0;
    position: relative;
}

.featured img {
    vertical-align: top;
    width: 100%;
}

.featured:hover {
    cursor: pointer;
}

.featured:after {
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    content: '\A';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    /* Transition */
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.featured:hover:after {
    color: #fff;
    content: '\f2f5';
    font-family: "Ionicons";
    font-size: 20px;
    opacity: 1;
}

jQuery:

$(document).ready(function(){
    var img = $(".featured > img");
    $(".featured").css({width:img.width(), height:img.height()});
});

I like the code because it's simple and it works on the images regardless of their dimensions.

<span class="featured"><img class="alignright size-medium wp-image-75" src="http://joshrodg.com/wp-content/uploads/IMG_001-300x225.jpg" alt="" width="300" height="225"></span>

Unfortunately, if I have post images that have been specifically aligned, this code will break that...is there any way to do the same thing while preserving the alignright, alignleft, or aligncenter class on the images?

Thanks,
Josh

Answer 1

I was able to find some jQuery that helped solve the issue:

$( ".alignright" ).parent().addClass( "alignright" );
$( ".alignleft" ).parent().addClass( "alignleft" );
$( ".aligncenter" ).parent().addClass( "aligncenter" );

This small piece of code finds alignright, alignleft, and aligncenter then adds those classes to the "parent" container, which is the containing element that those classes are applied to - in my case that would be the "featured" span.

Thanks,
Josh