/*With :after */
figure.test {	
	display: inline-block;
	position: relative;
	overflow: hidden;	
	text-align: center;		
	cursor: pointer;
}
figure.test img {
	width: 100%;
	height: 100%;
	border-radius:10px;
}
figure.test figcaption {
	position: absolute;
	top: 50%;
	left: 22.5%;
	right: 22.5%;	
	width: 200px;
	opacity: 0;
	z-index: 1;
	transition: all 0.8s ease-out;
	transition-delay: 0.2s;
}
figure.test:after {
	display: inline-block;
	position: absolute;
	content: "";
	top: 7%;
	left: 10%;
	right: 10%;
	bottom: 7%;
	background: white;
	opacity: 0;
	transition: all 0.8s ease-out;
}
figure.test:hover:after {
	opacity: 0.9;
}
figure.test:hover figcaption {
	transform: translateY(-50%);
	opacity: 1;
}

#rotate {
	perspective: 500px;
}
#rotate:after {
	transform: rotateX(90deg);
	transition: all 0.6s ease-in-out;
}
#rotate:hover:after {
	transform: rotateX(0deg);
}
#rotate figcaption {	
	transition: all 0.6s ease-in-out;
	transform: translateY(-50%) rotateX(90deg);
}
#rotate:hover figcaption {
	transform: translateY(-50%) rotateX(0);
}

/*Without :after*/
.frame {
	text-align: center;	
	position: relative;
	cursor: pointer;	
	border:1px #e6e6e6 solid;
	perspective: 500px; 	
	border-radius:10px;
	margin-bottom:30px;
}

.frame  .col-sm-12
{
	padding:0;
}


.frame img {
	width: 100%;
	height:260px;    
	object-fit: cover;	
	border-radius:10px;    
	object-fit: cover;
}


	.frame .details {
		width: 80%;
		height: 80%;
		padding: 15px;
		position: absolute;
		top: 50%;
		left: 50%;
		color: #FFFFFF;
		transform: translate(-50%, -50%) rotateY(90deg);
		transform-origin: 50%;
		background:rgb(232 154 27 / 51%);
		opacity: 0;
		transition: all 0.4s ease-in;	border-radius:10px;

	}
.frame:hover .details {
	transform: translate(-50%, -50%) rotateY(0deg);
	opacity: 1;
}

.details-border
{
	border:1px #FFFFFF solid;    
	height: 100%;    
	padding: 5px;
}

/*Effect without Perspective*/
.frame#wth {
	perspective: none;
}

.frame .details h1 
{
     font-size:18px !important;
     height:25px;
     color:#FFFFFF!important;
}
.frame .details p
{
     font-size:14px;
     height:100px;
     overflow:hidden;
}
.frame .details h2
{
    font-size:18px!important;
    margin-top: 45%;
    color: #FFFFFF!important;
    text-transform:uppercase;
}


.category-title
{
    font-size:18px;
    text-align:center;    
    margin: 0 0 25px 0;
}