Struggling with placing text over an image? Trying to achieve different text styles but ending up with overlapping lines? Here's a snippet of HTML that works with only one text style:
<li style="" class="portfolio-content-CV">
<div class="contentCV"><img src="images/backgr.png" height="500" width="510">
<p class="auto-style2"><span lang="es">yada yada</span></p>
</div>
</li>
However, things get tricky when multiple text styles are involved:
<li style="" class="portfolio-content-CV">
<div class="contentCV"><img src="images/backgr.png" height="500" width="510">
<p class="auto-style2"><span lang="es">yada yada</span></p>
<p class="auto-style1"><span lang="es">bla bla bla</span></p>
</div>
</li>
Check out the CSS formatting:
#portfolio-list .portfolio-content-CV a{
width: 510px;
float: left;
height:500px;
display:?table;
border:0.5px solid grey;
}
.contentCV {
width: 510px;
position: relative;
float: left;
cursor: pointer;
padding: 0px 0px 0px 0px;
background: #FFF;
border: 0px solid #E2E2E2;
margin-right: 10px;
margin-bottom: 10px;
display:table-cell;
vertical-align:bottom;
}
.contentCV a.titlesmall { display: none; }
.auto-style2 {
margin-left: 20px;
font-family: "AGENCYR";
font-size: 0.5em;
position: absolute;
top: 6px;
left: -8px;
width: 100%;
color: #000000;
}
.auto-style1{
margin-left: 16px;
font-family: "AGENCYR";
font-size: 0.5em;
position: absolute;
top: 6px;
left: -8px;
width: 100%;
color: #000000;
}
Looking for a solution to overlay complex text with different styles on an image? Any ideas? 🤔