Jane Doe
CEO abc
Caption 1
Jane Doe – sometimes casual
Jane Doe
CEO abc
Caption3
Caption 5
Jane Doe
CEO abc
Caption2
give a custom-class to the alb element
in this case here: icongrid-frontimage
function insert_frontside_image(){
?>
<script>
(function($){
$(document).ready(function(){
$('.icongrid-frontimage .article-icon-entry .avia-icongrid-front').each(function(){
var backside_img = $(this).next().find('img:first-child').attr('src');
$(this).find('.avia-icongrid-icon').css('display', 'none');
$(this).prepend('<div class="frontside_background"></div>');
$(this).find('.frontside_background').css({
'background-image': 'url('+backside_img+')',
})
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_frontside_image');
here comes the css code for it
.icongrid-frontimage .avia-icongrid {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly; /*** play with different values f.e. center; space-between; space-around; space-evenly ***/
}
.icongrid-frontimage .avia-icongrid::before,
.icongrid-frontimage .avia-icongrid::after {
display: none;
}
.icongrid-frontimage .avia-icongrid li {
flex: 1 1 auto; /*** you can test here 0 1 auto ***/
min-width: 250px;
max-width: 330px;
width: unset !important;
margin: 30px;
}
.icongrid-frontimage .avia-icongrid-flipback h3 {
line-height: 1.3em;
}
.icongrid-frontimage .avia-icongrid-flipback p {
line-height: 1.3em;
}
.icongrid-frontimage .avia-icongrid-flipbox li .avia-icongrid-front,
.icongrid-frontimage .avia-icongrid-flipbox li .avia-icongrid-flipback {
box-shadow: 2px 3px 15px #333;
}
.icongrid-frontimage .avia-icongrid-flipback .mbut1 .avia-button {
margin-top: 9px;
}
.icongrid-frontimage .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner,
.icongrid-frontimage .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner {
padding: 0 0.5em;
}
.icongrid-frontimage .avia-icongrid-text .wp-caption-text {
font-size:14px
}
.icongrid-frontimage .avia-icongrid li .avia-icongrid-content {
padding: 1em;
}
.icongrid-frontimage .avia-icongrid-front .frontside_background {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.icongrid-frontimage .avia-icongrid-front .frontside_background:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
display: inline-block;
}
.icongrid-frontimage .avia-icongrid-front .entry-content-header .av_icongrid_title,
.icongrid-frontimage .avia-icongrid-front .entry-content-header .av_icongrid_subtitle {
text-shadow: 2px 2px 4px #000;
}
.icongrid-frontimage .avia-icongrid-front .entry-content-header .av_icongrid_title {
font-size: 24px !important;
}
.icongrid-frontimage .avia-icongrid-front .entry-content-header .av_icongrid_subtitle {
font-size: 18px !important;
}
.icongrid-frontimage .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner {
top: calc(100% - 30px);
min-height: 61px;
background-color: inherit;
}
.icongrid-frontimage .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner .entry-content-header {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icongrid-frontimage .avia-icongrid-content .avia-icongrid-text > *:first-child > .wp-caption-text ,
.icongrid-frontimage .avia-icongrid-flipback .avia-icongrid-text > *:first-child > .wp-caption-text ,
.icongrid-frontimage .avia-icongrid-content .avia-icongrid-text > *:first-child > img ,
.icongrid-frontimage .avia-icongrid-flipback .avia-icongrid-text > *:first-child > img {
display: none !important;
}
.icongrid-frontimage .avia-icongrid-flipback .avia-icongrid-text {
position: relative;
}
.icongrid-frontimage .avia-icongrid-text > * {
left:50%;
transform:translateX(-50%);
position: relative;
}
/****
.icongrid-frontimage .av_icongrid_subtitle.icongrid_subtitle {
display: none;
}
****/
.icongrid-frontimage .avia-icongrid-content .wp-caption,
.icongrid-frontimage .avia-icongrid-flipback .wp-caption {
margin: 0 !important
}
.icongrid-frontimage .avia-icongrid-content .wp-caption:nth-of-type(2) img,
.icongrid-frontimage .avia-icongrid-flipback .wp-caption:nth-of-type(2) img {
width: 100% !important;
}
@media only screen and (max-width: 769px) {
.icongrid-frontimage .avia-icongrid li {
flex: 0 1 auto;
min-width: 340px;
max-width: 340px;
width: unset !important;
margin: 20px;
min-height: unset;
}
.icongrid-frontimage .avia-icongrid-flipback h3 {
font-size: 1.2em;
}
}