Snippet Menu-Image-Hover

snippets/menu/menuImageHover/index.html

@@ -0,0 +1,8 @@
+<figure class="hover-menu">
+	<img src="static/1.jpg"/>
+	<div>
+		<a href="#">Главная</a>
+		<a href="#">Галлерея</a>
+		<a href="#">Контакты</a>
+	</div>
+</figure>

snippets/menu/menuImageHover/style.css

@@ -0,0 +1,64 @@
+.hover-menu {
+    position: relative;
+    overflow: hidden;
+    margin: 8px;
+    min-width: 340px;
+    max-width: 480px;
+    max-height: 290px;
+    width: 100%;
+    background: #000;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.hover-menu * {
+    box-sizing: border-box;
+}
+
+.hover-menu img {
+    position: relative;
+    max-width: 100%;
+    top: 0;
+    right: 0;
+    opacity: 1;
+    transition: 0.3s ease-in-out;
+}
+
+.hover-menu div {
+    position: absolute;
+    top: 0;
+    left: -120px;
+    width: 120px;
+    height: 100%;
+    padding: 8px 4px;
+    background: #000;
+    transition: 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.hover-menu div a {
+    display: block;
+    line-height: 2;
+    color: #fff;
+    text-decoration: none;
+    opacity: 0.8;
+    padding: 5px 15px;
+    position: relative;
+    transition: 0.3s ease-in-out;
+}
+
+.hover-menu div a:hover {
+    text-decoration: underline;
+}
+
+.hover-menu:hover img {
+    opacity: 0.5;
+    right: -120px;
+}
+
+.hover-menu:hover div {
+    left: 0;
+    opacity: 1;
+}