Template:Panel2/style.css

.panel2{
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

.panel2 .panelBar{
	padding: 0.25em;
}

.panel2 .title{
	font-family: Roboto Slab;
	font-size: 1.2em;
	text-align: center;
	padding: 0.5em;
}

.panel2 .contentPane{
	position: relative;
}

.panel2 .overlayPane{
	position: absolute;
	z-index: 1;
	height: 100%;
	width: 50%;
	transition: 0.3s ease-in-out;
}

.panel2 .overlayPane .gradient{
	background: #DEDEDE;
	background: linear-gradient(270deg, transparent 0%, rgba(237, 237, 237, 0.7) 25%, rgb(237, 237, 237) 50%);
	bottom: 0; 
	left: 0;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	transition: 0.3s ease-in-out;
}

.panel2 .overlayPane .overlayText{
	padding: 3em 1em 3em 2em;
	color: #181818;
}

.panel2 .overlayPane .overlayText .heading{
	font-weight: 600;
	font-size: 1.2em;
}

.panel2 .imagePane{
	position: relative;
	display: block; 
	max-width: 100%; 
	transition: opacity 0.1s linear 0s;
}

.panel2 .imagePane .imageBox{
	max-height: 300px; position: relative; z-index: 0; overflow:hidden; height: 100%
}

.panel2 .moreLink{
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	background: rgb(237, 237, 237);
	background: rgba(237,237,237,0.5);
	z-index: 2;
}


.contentPane:hover .overlayPane {
	width: 100% !important;
	height: 100% !important;
}

.contentPane:hover .overlayText {
	height: 100%;
}

.contentPane:hover .gradient {
	background: rgb(237,237,237);
	background: rgba(237,237,237,0.6);
}

.imageBox img{
	width: 100%;
	height: auto;
}