@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
	  -webkit-animation: fadein 2s;
    animation: fadein 2s;
}

#title {
	text-align: center;
	font-family: arial;
	font-size: 50px;
}

.allCards {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.card {
	display: flex;
	align-items: center;
	height: 350px;
	width: 250px;
	background-color: gray;
	border-radius: 25px;
	margin: 20px 30px 20px 30px;	
}

.content {
	display: inline-block;
	margin: auto;
}

.content p {
	font-family: arial;
	font-size: 25px;
	-webkit-animation: fadein 1s;
    animation: fadein 1s;
    text-align: center;
    position: relative;
    opacity: 1;
}

.content:hover p {
	transition: opacity .5s;
	opacity: 0;
}

.content h3 {
	font-family: arial;
	font-size: 25px;
    text-align: center;
    opacity: 0;
    transition: opacity .5s;
    position: relative;
}

.content:hover h3 {
	opacity: 1;
	height: 330px;
	width: 230px;
	position: relative;
}