nearby events section - layout and style

Author: ViaCoco

static/scss/_near_event_grid.scss

@@ -0,0 +1,89 @@
+.grid {
+	padding: 2px;
+	overflow: hidden;
+
+	a {
+		color: $white;
+
+		figure {
+			position: relative;
+			overflow: hidden;
+			background: $white;
+			height: 250px;
+			width: 100%;
+
+			img {
+				display: block;
+				position: relative;
+				width: 100%; 
+				z-index: 9;
+			}
+
+			figcaption {
+				position: absolute;
+				top: 0;
+				z-index: 11;
+				padding: 10px;
+				width: 100%;
+				height: 50%;
+				text-align: left;
+				backface-visibility: hidden;
+
+				h4 {
+					margin: 25% 25% 0 0;
+					padding-top: 15px;
+					color: $white;
+					text-transform: uppercase;
+					backface-visibility: hidden;
+				}
+
+				span {
+					margin: 5px;
+					display: block;
+					backface-visibility: hidden;
+				}
+			}
+
+			.caption-description {
+				position: absolute;
+				top: 50%;
+				z-index: 10;
+				width: 100%;
+				height: 50%;
+				background: $primary-color;
+				backface-visibility: hidden;
+
+					p {
+						width: 90%;
+						margin: 10px auto;
+						display: block;
+					}
+			}
+
+			.caption-hider {
+				position: absolute;
+				top: 0;
+				z-index: 10;
+				width: 100%;
+				height: 100%;
+				background: $primary-color;
+				backface-visibility: hidden;
+
+
+				&:hover {					
+					-webkit-transform: translateY(-100%);
+					-moz-transform: translateY(-100%);
+					-ms-transform: translateY(-100%);
+					transform: translateY(-100%);
+					-webkit-transition: -webkit-transform 0.8s;
+					-moz-transition: -moz-transform 0.8s;
+					transition: transform 0.8s;
+				}
+			}
+		}
+
+		&:hover figcaption {
+			visibility: hidden;
+		}
+	}
+}

static/scss/style.scss

@@ -33,6 +33,7 @@ of the styles inside media queries.
 
 // Components
 //@import "thumbnails";
+@import "near_event_grid";
 
 // styles in base.scss
 @import "base";

web/templates/layout/near_event_tile.html

@@ -1,16 +1,18 @@
 {% load static %}
-<div class="col-sm-3 col-xs-6">
-	<a href="{% url 'web.view_event' event.id event.slug %}" class="thumbnail clearfix">
-		<h4>{{ event.title }}</h4>
-		<div class="caption">
-			<span class="countdown pull-left caption">
-				{{ event.start_date|date:"F j, Y" }}
-			</span>
-		</div>
+<div class="col-md-3 col-sm-6 col-xs-12 grid">
+	<a href="{% url 'web.view_event' event.id event.slug %}">
+		<figure>
 		{% if event.picture %}
 			<img src="{{ event.picture.url }}" alt="{{ event.title }} Image">
-		{% else %}
+			{% else %}
 			<img src="{% static 'img/event_default_picture.png' %}" alt="{{ event.title }} Image">
-		{% endif %}
+			{% endif %}
+			<div class="caption-description"><p>{{ event.description|truncatewords:15 }}</p></div>
+			<div class="caption-hider"></div>
+			<figcaption>
+				<h4>{{ event.title }}</h4>
+				<span>{{ event.start_date|date:"F j, Y" }}</span>
+			</figcaption>
+		</figure>
 	</a>
 </div>