div.item
	{
		width: 300px;
		height: 400px;
		margin: .5em;

		position: relative;
		overflow: hidden;
		border-radius: .2em;
		display: inline-block;

		transition: border-color .25s ease;
	}
div.gname
	{
		font-size: 1em;
		color: white;
		background: darkgreen;
		text-align: center;
		padding: .8em .7em .4em .7em;
		position: absolute;
		user-select: none;
		bottom: 0;
		left: 0;
		right: 0;
	}
div.gimage
	{
		background-position: 50% 0;
		background-repeat: no-repeat;
	}
div.join
	{
		color: #333;
		width: 150px;
		height: 150px;
		font-size: 16pt;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		text-align: center;
		margin: auto;
		opacity: 0;
		user-select: none;
		background: rgba(44, 140, 44, .8);

		border-radius: .3em;
		transition: opacity .25s ease;
	}
div.join a
	{
		color: #333;
		text-decoration: none;
		font-weight: bold;
		font-size: 88pt;
		cursor: pointer;
		position: absolute;
		text-align: center;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
div.join span
	{
		font-size: 16pt;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
    bottom: 10px;
	}
div.gimageb:hover, div.item:hover .gimageb
	{
		opacity: 0;
	}
div.item:hover div.join
	{
		opacity: 1;
	}