I am encountering an issue with my website where I have 3 boxes with roll-over effects. When a user hovers over the box, the content changes from a paragraph to an unordered list with a 'view more' button.
The problem is that each box has a different number of items in the list and the button is aligning at the end of the list instead of at the very bottom of the box. I have tried various solutions found in forums but haven't been able to resolve the issue. Can someone guide me in the right direction or point out if I am missing something?
Here is the link to the page:
The CSS code snippet I am working with is provided below:
.box {
// CSS styles here
}
// More CSS styles for different elements within the box
<div class="box">
<h2>Managed IT Solutions</h2>
<p>Content goes here.</p>
<i class="fa fa-gg"></i>
<div class="overbox">
<div class="title overtext">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
// Add more list items as needed
</ul>
<div class="tagline overtext">
<button type="button" class="btn btn-primary btn-lg btn-block"><a href="#">Find Out More</a></button>
</div>
</div>
</div>
</div>Any assistance on this matter would be greatly appreciated. Thank you!
Best regards, PhilB