After searching through numerous articles on Stack, I have yet to find a solution to my issue.
I have successfully implemented content display upon hovering over an image. However, I am encountering difficulties in vertically centering the displayed content, especially when dealing with multiple lines within the blocks. You can view my implementation on JSFiddle here: https://jsfiddle.net/wkmepjnk/
Any assistance with this matter would be greatly appreciated! Thank you
This is my HTML code:
<div class="grid-wrapper">
<div class="grid-single">
<img src="images/qdeck-logo.png">
<div class="grid-content">
<span>
<div class="hover-content">
<h1>QDeck</h1>
<p>Q-Deck® decking or deckboards are available in four standard timber profiles, two anti-slip resistant timber profiles known as Q-Grip® and a composite profile in a range of colours known as Q-Deck Twinson.</p>
<div class="hover-button">More Info</div>
</div>
</span>
</div>
</div>
<!--Close Grid Single-->
</div>
<!--Close Grid Wrapper-->
And this is my CSS code:
.grid-wrapper {
width:100%;
height:auto;
background-color:#ffffff;
-webkit-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
}
.grid-single {
width:25%;
height:auto;
margin-right:-5px;
display:inline-block;
border:1px solid #e0e3e6;
position: relative;
}
.grid-single h1 {
font-family: 'montserratlight';
font-size:25px;
line-height:30px;
color:#ffffff;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:10px;
}
.grid-single img {
width:100%;
height:auto;
margin-bottom:-5px;
}
.grid-single .grid-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #1ABC9C;
opacity: 0;
transition: opacity 0.1s;
text-align:left;
}
.grid-single .grid-content span {
display: block;
position:absolute;
top:10%;
left:10%;
width:80%;
height:auto;
text-align:center;
}
.grid-single .grid-content span p {
font-family: 'montserratlight';
font-size:14px;
line-height:21px;
color:#ffffff;
margin-bottom:15px;
letter-spacing:0px;
}
.grid-single .grid-content span p strong {
color:#a1cc3a;
margin-bottom:4px;
}
.grid-single:hover .grid-content {
opacity: 1;
}
.hover-button {
display:inline-block;
width:auto;
height:40px;
background-color:#2C3E50;
padding:0px 20px;
font-family: 'montserratlight';
font-size:15px;
line-height:40px;
color:#ffffff;
}