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=".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=".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

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/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/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

• functions
• images
• jquery
• html

• 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 Commented Mar 28, 2019 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/questions/36000/… (except instead of the div class "my photo", I'm using the span class "featured") – joshmrodg Commented Mar 29, 2019 at 12:25

1 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