How to format text with hover overlay image
Question
I have the following code with the goal to display a name without hovering centered in the shape, then after hovering having a bio of 5 lines all centered with minimal spacing between line breaks.
The problem in my code currently is formatting the front-side to be all centered and have the same big font as the after-hover, and even more notably wrong- the info on the back is coming off the end of the shape. Not centered.
<html>
<div id="box">
John Doe
<div id="overlay">
<span id="plus">Title:<br>DOB:<br>Hometown:<br>Info4:<br>Info5:</span>
</div>
</div>
<style>
body {
background: -1;
}
#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;
/* NEW */
line-height: 200px;
text-align: center;
position: relative;
}
#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;
/* NEW */
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</html>
1 answers
solution1
0 ACCPTED 2018-07-08 02:09:23
This isn't an answer to all of your questions, but to get the font styles to be the same, add the font styling that you have for #plus to the #box selector instead. You will have to change the color for the box selector to black and for #plus you can leave what you currently have for the color.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.