Image Flip Box - Support | Kriesi.at - Premium WordPress Themes

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
February 25, 2022 at 2:09 pm #1342272

GoodfishGroup_Marketing
Participant

Hi,

I’m trying to create a flip box on the about us page for our meet the team. So the image on the front would be a professional image of the team member and then hover over it and it flips to a casual image of the member.

Is this possible to do and if so how?

Thanks,
Matt

February 26, 2022 at 7:58 pm #1342414
Mike
Moderator
Hey GoodfishGroup_Marketing,
Thank you for your question, this can be done with the Icon Grid element and the css below, note that we are using :nth-child to show a different image for each grid front and back, the css below is for three cells but you can have as many as you like.
Since images added like this don’t add a height to the page elements we need to also add height in the css, for my example I made the grid row 75vh so it looked full height, you should adjust to your needs.
Try to change the image URLs to your images and test
```
.avia-icon-grid-container li:nth-child(1) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(//enfold/wp-content/uploads/2022/02/man2.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(1) .avia-icongrid-wrapper .avia-icongrid-flipback {
  background-image: url(//enfold/wp-content/uploads/2022/02/man4.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(2) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(//enfold/wp-content/uploads/2022/02/woman4.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(2) .avia-icongrid-wrapper .avia-icongrid-flipback {
  background-image: url(//enfold/wp-content/uploads/2022/02/woman3.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(3) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(//enfold/wp-content/uploads/2022/02/man1.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(3) .avia-icongrid-wrapper .avia-icongrid-flipback {
  background-image: url(//enfold/wp-content/uploads/2022/02/man3.jpg)!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.avia-icon-grid-container li .avia-icongrid-wrapper .avia-icongrid-front .avia-icongrid-icon {
	display: none;
}
```
just in case you want to make your grid larger like in my example, this is the css I used:
```
.avia-icon-grid-container,.avia-icongrid-wrapper,.article-icon-entry {
	height: 75vh;
}
.responsive #av_section_1 > .container {
	max-width: 1810px;
}
```
If you have trouble with this then create a text page and include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike
March 1, 2022 at 6:00 pm #1342750

GoodfishGroup_Marketing
Participant

Hi Mike,

Thanks for getting back to me.

I will try the above and get back to as to how I get one.

Thanks,
Matt

March 1, 2022 at 6:51 pm #1342754

GoodfishGroup_Marketing
Participant

Hi Mike,

I’ve followed the CSS and its worked!

I now would like to align the icon grid title at the bottom of each tile, if you could possibly help with that please?

Thanks,
Matt

March 1, 2022 at 8:14 pm #1342764
Guenni007
Participant
i would have done that by using the icon grid alb element too – but i place in the background content two images – the first placed image i take for the background-image of the front by jQuery script.

not to have that on all icon grids – i give the element a custom class – f.e.: 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');
```
the rest is quick css – see resultpage: https://webers-testseite.de/icongrid-with-frontimage/

PS: If you use the element only once, I can’t recommend this solution. But if you want to use the background image on the front often, it has the advantage of being able to select the images via Media Library.
If you are interested i will post the css code here too.
( see f.e. too: https://consulting.webers-testseite.de/leistungen2/ )
March 1, 2022 at 8:24 pm #1342765

Rikard
Keymaster

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard

March 1, 2022 at 8:32 pm #1342766

Guenni007
Participant

by the way – that will be a nice feature to have. An input field for a frontside background image. If it is set the icon will be set to display none.

March 2, 2022 at 2:59 am #1342787

Mike
Moderator

Hi,
Thanks for sharing Guenni007, nice approach and well done 🙂

Best regards,
Mike

March 2, 2022 at 11:59 am #1342831

GoodfishGroup_Marketing
Participant

Hi Guenni007,

Thanks for the reply.

So, I’ve added two images into the the icon grid backside content area as mentioned above. I’ve also added the script to the function.php and added the quick css as recommended. The front image is there, however when flipped around both images are shown on the backside. Have I missed something?

The flip boxes on the link (https://consulting.webers-testseite.de/leistungen2/) look really nice with the image on the front and description with button on the back. I think this could work else where on our site to showcase our capabilities with a button/link to the page. If you send me info on how to set this up that would be great.

Thanks,
Matt

March 2, 2022 at 1:49 pm #1342843

Guenni007
Participant

On that other link : you can add everything you like to the backside content – there only has to be one image inside that will be the background-image for the frontside.

Ah – i see – on my example there is a caption on the first image. I will see how the code is on first image with no caption.

Edit: Now there is a modified css on the link page. I removed the background-color from code – because you can set it on alb element yourself.

March 2, 2022 at 2:41 pm #1342854

Guenni007
Participant

Edit : I’m going to clean up the code a bit; because when I made these adjustments, there were a lot less options in the ALB element itself. So I guess you can remove font colors and background colors now, I’ll check that right now.
box-shadow option is possible too in alb element.

March 2, 2022 at 5:08 pm #1342878

GoodfishGroup_Marketing
Participant

Thanks Guenni007 appreciate it.

Have you removed the above css?

Thanks,
Matt

March 3, 2022 at 11:06 am #1342977

Guenni007
Participant

it is a complete substitution for it. The mistake was that in my setup I only placed images with caption in the content. Thus the selector was not prepared for all cases.
The out-commented rule for the subtitle in that css code – is, if you only want the title on frontside

March 3, 2022 at 1:18 pm #1343001

Mike
Moderator

Hi,
Thanks for sharing Guenni007, the css from your example page and the script above make a great easy to use solution.

Best regards,
Mike

March 4, 2022 at 11:23 am #1343100

Guenni007
Participant

Yes – but only if it is needed often – more than once.
Your quick css solution is faster when only needed for one grid flip.

March 4, 2022 at 1:52 pm #1343134

Mike
Moderator

Hi,
Thanks Guenni007
GoodfishGroup_Marketing were you able to sort this out, shall we close this then?

Best regards,
Mike

March 31, 2022 at 5:49 pm #1346761

GoodfishGroup_Marketing
Participant

Hi All,

I do apologies.

This issue is resolved thank you.

Kind Regards,
Matt

April 1, 2022 at 1:32 am #1346784

Mike
Moderator

Hi,
Glad Guenni007 was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Image Flip Box’ is closed to new replies.