Creare un effetto hover animato sulle immagini con CSS3

HTML

<div class="demo-content">
	<figure>
		<img src="https://code4life.it/wp-content/uploads/2017/10/placeholder.jpg" alt="" />
		<a href="https://code4life.it/" target="_blank"></a>
	</figure>
</div>

<!-- Credits -->

CSS

/*
 * TITLE:   Creare un effetto hover animato sulle immagini con CSS3
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/creare-un-effetto-hover-animato-sulle-immagini-con-css3/
 */

/* Required snippet style */
figure {
	background: #33b5e5;
	display: inline-block;
	overflow: hidden; 
	position: relative;
}

figure img,
figure:before,
figure:after {
	transition: all 0.4s ease;
 	-webkit-transition: all 0.4s ease;
}

figure:before,
figure:after {
	background-color: #fff;
	content: '';
	opacity: 0;
	position: absolute;
	z-index: 1;
	transform: translate( -50%, -50% );
	-webkit-transform: translate( -50%, -50% );
}

figure:before {
	left: 0;
	height: 1px;
	width: 60px;
}

figure:after {
	height: 60px;
	top: 100%;
	width: 1px;
}

figure a {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

figure:hover img {
	opacity: 0.5;
	transform: scale( 1.2 );
}

figure:hover:before,
figure:hover:after {
	left: 50%;
	opacity: 1;
	top: 50%;
}

/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem;  text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }