title: How to icon vertically center when i enter small one line content in hover box? it is possible or not?
body: <p>Hello i was try to set <strong>icon</strong> on <strong>hover</strong> but working fine when box content is same line but when i enter <strong>small content one line</strong> in any box than <strong>icon was not proper vertically</strong> center also i have attachment what is issues ans what i want. i wast set position relative and top with percentage please any solution fot that isses. content is none block on box hover. <strong>Thanks in adavance</strong>.</p>
  
  <p><strong>Same line code</strong> : <a href="https://i.stack.imgur.com/BOjhU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BOjhU.jpg" alt="enter image description here"></a></p>
  
  <p><strong>When enter small one line content</strong> : <a href="https://i.stack.imgur.com/5jDZh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5jDZh.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section { padding: 100px 0; }
              img { max-width: 100%; }
              * { box-sizing: border-box; }
              figure {
                  position: relative;
              }
              .blog-hover-icon { 
                  -webkit-transition: 0.3s;
                  transition: 0.3s;
                  position: absolute;
                  height: 100%;
                  width: 100%;
                  background: rgba(37, 37, 37, 0.5);
                  top: 0;
                  left: 0;
                  text-align: center;
                  z-index: 1;
                  visibility: hidden;
                  opacity: 0;
              }
              .box .blog-hover-icon {
                  visibility: visible;
                  opacity: 1;
              }
              .box .blog-hover-icon span {
                  font-size: 30px;
                  line-height: 30px;
                  color: #fff;
                  position: relative;
                  top: 12%;
              }
              .box .post-content {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  padding: 30px;
                  background-color: #252525;
                  z-index: 2;
                  color: #fff;
              }
              .box .post-content a {
                  color: #5971ff;
              }
              .box .post-content a:hover {
                  text-decoration: none;
              }
              .box .post-content p {
                  display: none;
              }
              .box:hover .post-content p {
                  display: block;
              }
              .box .post-content .author {
                  margin-top: 10px;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;section&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row h-100"&gt;
                      &lt;div class="col-md-4 box"&gt;
                          &lt;figure&gt;
                              &lt;div class="blog-image position-relative"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img src="http://placekitten.com/1000/1000" alt="test"&gt;
                                  &lt;/a&gt;
                                  &lt;div class="blog-hover-icon"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;figcaption&gt;
                                  &lt;div class="post-content text-center"&gt;
                                      &lt;div class="card-title"&gt;&lt;a href="#"&gt;Leopard is an animal design, and my designs come from nature.&lt;/a&gt;&lt;/div&gt;
                                      &lt;p&gt;Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.&lt;/p&gt;
                                      &lt;div class="author"&gt;
                                          &lt;span class="text-uppercase"&gt;30 jul / by &lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;                                    
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/figcaption&gt;
                          &lt;/figure&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4 box"&gt;
                          &lt;figure&gt;
                              &lt;div class="blog-image position-relative"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img src="http://placekitten.com/1000/1000" alt="test"&gt;
                                  &lt;/a&gt;
                                  &lt;div class="blog-hover-icon"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;figcaption&gt;
                                  &lt;div class="post-content text-center"&gt;
                                      &lt;div class="card-title"&gt;&lt;a href="#"&gt;Leopard is an animal design, and my designs come from nature.&lt;/a&gt;&lt;/div&gt;
                                      &lt;p&gt;Lorem Ipsum is simply text&lt;/p&gt;
                                      &lt;div class="author"&gt;
                                          &lt;span class="text-uppercase"&gt;25 jun / by &lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;                                    
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/figcaption&gt;
                          &lt;/figure&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4 box"&gt;
                          &lt;figure&gt;
                              &lt;div class="blog-image position-relative"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img src="http://placekitten.com/1000/1000" alt="test"&gt;
                                  &lt;/a&gt;
                                  &lt;div class="blog-hover-icon"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;figcaption&gt;
                                  &lt;div class="post-content text-center"&gt;
                                      &lt;div class="card-title"&gt;&lt;a href="#"&gt;Leopard is an animal design, and my designs come from nature.&lt;/a&gt;&lt;/div&gt;
                                      &lt;p&gt;Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.&lt;/p&gt;
                                      &lt;div class="author"&gt;
                                          &lt;span class="text-uppercase"&gt;05 dec / by &lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;                                    
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/figcaption&gt;
                          &lt;/figure&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>