commit 1fd3d1611e5dfe0e753de050b2d839534bbd7d0c
parent 13b0a22c2651374cbab1b827afe218aec90c3966
Author: Hugo Soucy <hugo.soucy@toumoro.com>
Date: Wed, 18 Sep 2019 13:41:43 -0400
Add a new web snippet to create a clickable image block
Diffstat:
1 file changed, 70 insertions(+), 0 deletions(-)
diff --git a/snippets/web-mode/blocks/block-img-clickable b/snippets/web-mode/blocks/block-img-clickable
@@ -0,0 +1,70 @@
+# -*- mode: snippet -*-
+# name: Clickable BLOCK with image & text (HTML/CSS)
+# key: block-img-clickable
+# --
+
+<style>
+ .block-img-clickable {
+ color: #ffffff;
+ display: inline-block;
+ position: relative;
+ text-decoration: none;
+ }
+
+ .block-img-clickable:focus {
+ outline: 0.5rem solid rgb(6, 80, 105);
+ outline-offset: -0.5rem;
+ }
+
+ .block-img-clickable__text {
+ background: rgba(6, 80, 105, 0.75);
+ bottom: 0;
+ color: #ffffff;
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: normal;
+ padding: 2rem 6rem 2rem 2rem;
+ margin: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ transition: all 0.25s ease-in-out;
+ z-index: 1;
+ }
+
+ .block-img-clickable:focus .block-img-clickable__text,
+ .block-img-clickable:hover .block-img-clickable__text {
+ background: rgba(6,80,105,1);
+ }
+
+ .block-img-clickable__text::after {
+ background: url("ico-arrow-right.svg") no-repeat;
+ bottom: 0;
+ content: "";
+ display: block;
+ height: 2rem;
+ margin: auto 0;
+ position: absolute;
+ right: 2rem;
+ top: 0;
+ width: 2rem;
+ }
+
+ .block-img-clickable__img {
+ display: inline-block;
+ max-width: 100%;
+ vertical-align: bottom;
+ }
+</style>
+
+<a class="block-img-clickable" href="${1:#}">
+ <h2 class="block-img-clickable__text" id="txtImg0">
+ ${3:Cum sociis natoque penatibus et magnis dis parturient montes,
+ nascetur ridiculus mus.}
+ </h2>
+
+ <img alt=""
+ aria-describedby="txtImg0"
+ class="block-img-clickable__img"
+ src="${2:https://dummyimage.com/1024x768/ccc/000.png}" />
+</a>