Hello dear, I want to ask how to show image in the card element

Support
#1

Hello dear support.

I am not a technical and I am trying to use the pro theme. When i use the card element, I want to put one image on the first side, the content and link on the back side. But when i put the short code for image [x_image type=“circle” float=“none” src=“https://yhsay.com/wp-content/uploads/2017/07/Daphne-Wang.jpg” info=“none” info_place=“top” info_trigger=“hover”] into the card, it does not display. I don’t know why. Please kindly help.

#2

Hi There,

Thank you for writing in, do you want the image in front of the card? If so, there is an option to place an image in front of the card instead of icon (https://prnt.sc/g0c55c).

If you need the image inside the content (front or back) please don’t use the image shortcode, it will break your card. Use html code instead.

<img src="https://yhsay.com/wp-content/uploads/2017/07/Daphne-Wang.jpg" alt="Daphne Wang" title="Daphne Wang" />

Hope it helps,
Cheers!

#3

Hi,

Is there any way to put an image on the back of the card? So when it turns over the image will take up the whole card, and the button will take you to a link related to the image?

#4

Hi There,

Put the html code I’ve provided above on the card’s back content.

If you need the image to take up the entire card width and height, then you need the image to be a background. But I need to warn you first, the background is responsive in a different way it does force to cover the entire container that sometimes it getting to zoomed and showed being cut/crop (see what I mean here).

To set the image as the background of your card, please add a CLASS card-bg to your Card element, and then add this on your custom CSS.

.card-bg .back {
	background-image: url(BACKGROUND-IMAGE URL HERE);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Hope it helps,
Cheers!