/* *{
    box-sizing:border-box;
}
html, body, container{
    padding:0;
    margin:0;
    height:100%;
    font-family:arial;
    color:#333;
}
container, content{
    display:flex;
    justify-content:center;
    align-items:center;
}*/

/* --------- */

box{
	display:inline-block;
	width:150px;
	height:158px;
	/*border:1px solid #dfdfdf;
	border-radius:75px;*/
	margin:8px;
	background-position:center;
	/*background-size:cover;*/
	position:relative;
	/*box-shadow:5px 5px 10px #ccc;*/
	/*cursor:pointer;*/
}
box img{
	box-shadow:5px 5px 10px #ccc;
	width: 147px; 
	border-radius: 75px; 
	border: 1px solid lightgray;
}

box span{
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
	/*background-color:rgba(254, 174, 89, 0.8);*/
	bottom:-25px;
	left:0;
	right:0;
	height:25px;
	padding:8px 8px 0;
	transition: all ease .1s;
	/*color:#fff;*/
	text-align:center;
}
box span p{
	opacity: 0;
	transition: all ease .5s;
	font-size: 25px;
}
box span h4{
	margin:-9px 0 12px;
	padding:0;
	/*font-weight:bold;*/
}
box span p {
	padding: 0 3px;
	margin: -13px 0 10px;
}
box::after{
	content:"";
	display:block;
	position:absolute;
	z-index:4;
	background-color:rgba(255, 255, 255, .2);
	top:0; right:0; bottom:0; left:0;
}
box:hover span{
	height:35%;
	background-color: white;
}
box:hover span p{
	opacity: 1;
	font-weight:bold;
}


/* --------- */