Here is some code for displaying hidden information on shape hover, but there are a couple of issues: 1. When the font size is reduced to 24px, the dark grey background does not cover the entire shape. 2. I want to include text that appears with the hover effect, such as displaying information before hovering and then fading away to reveal new info behind it, like a name fading to reveal a bio.
This code was generated using W3Schools: https://www.w3schools.com/code/tryit.asp?filename=FT2LEOI9SQQN
<html>
<div id="box">
<div id="overlay">
<span id="plus">Hello<br>Hi</span>
</div>
</div>
<style>
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</html>