How to display excerpt when hovering on featured images in Executive Pro with a flip effect

archive-portfolio.php

add_action( 'genesis_entry_content', 'sk_do_post_content' );
function sk_do_post_content() {
	if ( has_post_thumbnail() ) {
		$image = genesis_get_image( 'size=portfolio' );
	} else {
		$image = '<img src="' . get_stylesheet_directory_uri() . '/images/default-image.gif" />';
	}

	echo '<div class="flip-container">
			<div class="flipper">
				<div class="front">'
					. $image .
				'</div>
				<div class="back">
					<div class="info">
						<p>' . excerpt( '15' ) . '</p>
						<p><a class="button" href="' . get_permalink() . '">Read more »</a></p>
					</div> <!-- /info -->
				</div> <!-- /back -->
			</div> <!-- /flipper -->
		</div> <!-- /flip-container -->
		';
}

functions.php

function excerpt( $limit ) {
    return wp_trim_words( get_the_excerpt(), $limit );
}

gistfile1.php

//* Add the featured image after post title
add_action( 'genesis_entry_header', 'executive_portfolio_grid' );
function executive_portfolio_grid() {

    if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
        printf( '<div class="portfolio-featured-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );

    }

}

style.css

/* CSS Flipping Animation
------------------------------------------------------ */

/* entire container, keeps perspective */
.flip-container {
	overflow: hidden;

	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container:hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
	height: 200px;
}

/* flip speed goes here */
.flipper {
	position: relative;
	transition: 0.6s;

	transform-style: preserve-3d;
}
.flipper .info {
	padding: 20px;
}
.flipper .info h3 {
	margin-bottom: 10px;
}
.flipper .info p {
	margin-bottom: 0;
}
.flipper a.button {
	margin-top: 20px;
	padding: 10px 30px;
	font-size: 14px;
}

/* hide back of pane during swap */
.front,
.back {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;

	-o-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

@media only screen and (min-width: 801px) {
	.back {
		background: #f2f2f2;
	}
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

.vertical .back {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

@media only screen and (max-width: 1024px) {
	.flipper .info h3 {
		font-size: 20px;
	}

	.flipper .info p {
		font-size: 15px;
	}

	.flip-container,
	.front,
	.back {
		height: auto;
	}

	.front,
	.back {
		position: static;
	}

	.front img {
		vertical-align: top;
	}

	.back,
	.flip-container:hover .back,
	.flip-container:hover .front {
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
}

@media only screen and (max-width: 768px) {
	.flip-container {
		margin-bottom: 40px;
	}
}