When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance.
HTML
<div class="row mycustombox">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
<a href="#" class="customoverlay">
<img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
<div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
<h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
<a href="#" class="customoverlay">
<img src="http://silver11.net/...
<p><strong>CSS</strong></p>
<pre><code>.customoverlay {
position:relative;
}
.customoverlay img {
margin:0;
padding:0;
}
...
jQuery(window).load(function(){
var getimagewidth=jQuery(".customoverlay").find('img').width();
var imageHeight;
var windowWidth=jQuery( window ).width();
var columnPadding;
if(windowWidth<=320){
imageHeight='65px';
}
...
});
</script>