To have one of your images flipped when the page loads, you have to separate it from the rest and use the backface as the default state. By "separate", I mean, use a different class name, id or name.

Now, according to the codepen fiddle you gave us, it is impossible for more than images to be flipped simultaneously since the image flips back to its default state when the mouseout event is triggered.

To flip the image that has the text being visible on default when another image is hovered, use this jQuery script:

EDIT:

As I promised, here is a working version of what you asked for; or basically what I understood you asked for.

Since you already have found that working fiddle which like and want to replicate, I think trying to reinvent the wheel would be utterly pointless.

→ There are a few things you have to add, though, to the CSS though and of course some jQuery:

CSS:

/* We create a pre-flipped class for the element you want already flipped
when the page loads. */
.pre-flipped {
transform: rotateY(180deg);
/* That's what the card are supposed to do on hover
Our already flipped card must already have this rule
in order to be flipped from the start. */
}
/* If you want the images to be inline change the display
from block to inline-block as shown: */
.flip-images .card-wrapper {
display: inline-block;
}

In the CSS of your fiddle there is a block of code as shown below which is used to flip the cards on hover:

.flip-images .card-wrapper:hover .card {
transform: rotateY(180deg);
} /* I removed it and as it makes things complicated
when trying to create the hover effect from jQuery. */