My goal for a landing page design is to showcase a centered logo at the top, followed by three images with borders arranged side by side, each with a bit of padding. When a user hovers over any of these images, I want the text on that image to slide to the bottom and be enclosed in a box. Additionally, I aim to have the page fill 100% of the browser window without any vertical scrolling on desktop, but on tablet or mobile devices, the images should stack neatly.
While I have managed to implement the text sliding effect and the stacking for smaller devices, I have encountered a few issues.
Despite my efforts, I have not been able to restrict the page to 100% of the browser window on the desktop. There always seems to be a slight vertical scrolling requirement to view the bottom of the three images.
Furthermore, upon hovering over an image, the scrollbar expands, indicating an issue with the hover code as it is pushing the entire overlay box downwards. I also aspire to enclose the text in a colored box upon hover, however, my attempts to add a background or border result in enclosing the entire overlay element rather than just the text. I am unsure of how to resize the text element to be centered within the image, matching the text size so it can be styled further.
Any help or guidance on these issues would be greatly appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
.overlay {
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
transition: .5s ease;
}
.cols {
position: relative;
text-align: center;
}
.cols:hover .overlay {
bottom: 0;
height: 100%;
}
.cols img {
border: 10px solid #332b2a;
height: 100%;
width: 100%;
}
p {
color: white;
font-size: 30px;
font-family: 'Roboto', serif;
font-weight: 800;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
}
.imageCentre {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
padding-top: 10px;
}
.logo {
padding-bottom: 10px;
}
.col-xs-6 {
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row logo">
<img src="images/logo.png" class="imageCentre" alt="Logo"/>
</div>
<div class="row">
<div class="col-xs-6 col-md-4 cols">
<a href="http://url.com" accesskey="l">
<div class="overlay">
<p>TEXT 1</p>
</div>
<img src="images/image1.jpg" alt="Image 1" />
</a>
</div>
<div class="col-xs-6 col-md-4 col-md-offset-2 cols">
<a href="http://url.com" accesskey="c">
<div class="overlay">
<p>TEXT 2</p>
</div>
<img src="images/image2.jpg" alt="Image 2" />
</a>
</div>
<div class="col-xs-6 col-md-4 col-md-offset-2 cols">
<a href="http://url.com" accesskey="o">
<div class="overlay">
<p>TEXT 3</p>
</div>
<img src="images/image3.jpg" alt="Image 3" />
</a>
</div>
</div>
</div>
</body>
</html>