The App Bag - App Showcase - Pure CSS

index.html

<div class="myapp-container">
		<div class="myapp-img">
			<img src="http://upload.wikimedia.org/wikipedia/en/1/19/Google_Maps_Icon.png">
		</div>
		<div class="myapp-text">
			<p>Google Maps</p><br />
			<span>
				<i class="fa fa-star"></i>
				<i class="fa fa-star"></i>
				<i class="fa fa-star"></i>
				<i class="fa fa-star"></i>
				<i class="fa fa-star-half-o"></i>
			</span>
		</div>
		<div class="myapp-topdr"></div>
		<div class="myapp-botdr"></div>
	</div>

script.js

/*

		   This pen uses Font Awesome:
   http://fontawesome.io

*/

style.css

.myapp-container {
	position: absolute;
	z-index: 2;
	width: 450px;
	height: 450px;
	border: 15px solid #e74c3c;
	background-color: #ecf0f1;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

}

.myapp-img {
	position: absolute;
	z-index: 3;
	width: 300px;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    transition-property: top;
	transition-duration: 0.3s;
}

.myapp-img img {
	position: absolute;
	width: 300px;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition-property: top, width;
	transition-duration: 0.3s;
}

.myapp-text {
	position: absolute;
	z-index: 0;
	color: black;
	top: 60%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Helvetica', sans-serif;
    font-size: 2em;
    font-weight: bold;
}

.myapp-text .fa {
	font-size: 2em;
	color: #f39c12;
}

.myapp-topdr {
	position: absolute;
	z-index: 2;
	height: 225px;
	width: 100%;
	top: 0;
	background-color: #3498db;
	transition-property: height;
	transition-duration: 0.3s;
	/*border: 1px solid blue;*/
}

.myapp-botdr {
	position: absolute;
	z-index: 1;
	height: 225px;
	width: 100%;
	bottom: 0;
	background-color: #e74c3c;
	transition-property: height;
	transition-duration: 0.3s;
	/*border: 1px solid blue;*/

}

.myapp-container:hover {
	cursor: pointer;
}

.myapp-container:hover .myapp-topdr {
	height: 30%;
}

.myapp-container:hover .myapp-botdr {
	height: 0;
}

.myapp-container:hover .myapp-img {
	top: 25%;
}

.myapp-container:hover .myapp-img img {
	top: 25%;
	width: 50%;
}

The-App-Bag---App-Showcase---Pure-CSS.markdown

The App Bag - App Showcase - Pure CSS

Showcase your app on your website with this simple pen. You can customize this to suit your needs, I always keep the code as simple as possible. Note: Google Maps is icon is used just for demo purpose. This pen uses Font Awesome: http://fontawesome.io

A Pen by Preetesh Jain on CodePen.

License.