0

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

  • How are you adding this code (the wrapping div and span) to images that are inserted in the WordPress editor now? What happens when alignment is applied? – Michelle Mar 28 at 21:35
  • So, the div class is just my container...that's not around every single image. I'm sorry, I didn't mention that. The span is being applied via a WP function from the accepted answer - wordpress.stackexchange.com/questions/36000/… (except instead of the div class "my photo", I'm using the span class "featured") – Josh Rodgers Mar 29 at 12:25
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.