Uikit3 on hover flip card

index.html

<div class="uk-section">
<div class="uk-container">
<div class="uk-grid uk-child-width-1-4@m uk-child-width-1-2@s uk-grid-match uk-grid-small" uk-grid>
		<div class="card-flip">
			<div class="uk-card uk-card-default uk-card-small uk-card-hover card">
      <a href="#" class="uk-position-cover"></a>
				<div class="front uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(https://getuikit.com/docs/images/light.jpg);">
            <p class="uk-h4">Front</p>
        </div>
        <div class="back card-face uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-center uk-flex-middle" style="background-image: url(https://getuikit.com/docs/images/dark.jpg);">
            <p class="uk-h4 uk-light">Back</p>
        </div>
			</div>
		</div>
	</div>
  </div>
  </div>

script.js

$('.card-flip').hover( function () {
  $('.uk-card').toggleClass('flipped');
});

scripts

<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=1720"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js?nc=1720"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.okreni {
	cursor: pointer;
	padding: 20px;
}
.uk-card {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		-webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border-radius: 3px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.uk-card .card-face.back {
	display: none;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.uk-card .card-face {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: none;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-o-box-pack: center;
	justify-content: center;
	-o-box-align: center;
	align-items: center;
	-webkit-font-smoothing: antialiased;
}
.flipped {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.flipped .back {
	display: block !important;
}
.flipped .front {
	display: none;
}
.uk-sticky-below {
	transition: all 0.15s ease-out;
}

styles

<link href="https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=1720" rel="stylesheet" />

uikit3-on-hover-flip-card.markdown

Uikit3 on hover flip card

A Pen by Igor on CodePen.

License.