Issue
Hello i was try to set icon on hover but working fine when box content is same line but when i enter small content one line in any box than icon was not proper vertically 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. Thanks in adavance.
Same line code : 
When enter small one line content : 
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;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row h-100">
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text</p>
<div class="author">
<span class="text-uppercase">25 jun / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">05 dec / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>Solution
Please change your html and css code as per below and update it.
section { padding: 100px 0; }
img { max-width: 100%; }
* { box-sizing: border-box; }
figure {
position: relative;
}
figure figcaption {
position: absolute;
bottom: 0;
top: 0;
height: 100%;
width: 100%;
-ms-flex-direction: column;
-webkit-box-orient: vertican;
-webkit-box-direction: norman;
flex-direction: column;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.blog-hover-icon {
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: 1;
visibility: hidden;
opacity: 0;
}
.box:hover .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 {
padding: 30px 40px;
background-color: #252525;
z-index: 2;
-webkit-transition: 0.3s;
transition: 0.3s;
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;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row h-100">
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design.</a></div>
<p>Lorem Ipsum is simply.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>Answered By - Satish Answer Checked By - Pedro (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.