Zoom a box-shadow na :hover receptu

sass/style.scss

@@ -138,9 +138,13 @@ main {
 			overflow:hidden;
 			box-sizing:border-box;
 			width:100%;
+			box-shadow: none;
+			transition: box-shadow .15s ease;
 
 			&:hover {
-				color:$anchor-hover-color;
+				box-shadow: 0 0 8px #888;
+				a { color: inherit }
+				.image { background-size: 110% }
 			}
 
 			a {
@@ -150,6 +154,19 @@ main {
 				color: $article-color;
 			}
 
+			.image {
+				position: relative;
+				width: 100%;
+				background-size: 100%;
+				background-position: center;
+				transition: background-size .15s ease;
+			}
+			.image:before {
+				content: "";
+				float: left;
+				padding-top: 100%;
+			}
+
 			.title {
 				margin: 1em .8em .5em .8em;
 				text-align: center;

templates/macros.html

@@ -18,7 +18,7 @@
 			{% endif %}
 		{% endfor %}
 		{% set image = resize_image(path=image, width=300, height=300, op="fill") %}
-		<img src="{{ image.url }}" alt="{{ recipe.title }}">
+		<div class="image" style="background-image: url('{{ image.url }}')"></div>
 		<div class="title">{{ recipe.title }}</div>
 		{% if recipe.date %}<span class="date">{{ recipe.date | date(format="%d.%m.%Y") }}</span>{% endif %}
 	</a>