I'm seeking a way to align my text with this tilted image, but the issue is that the text is scrolling. Is there any solution to address this?
My objective is to maintain the bolded "TITLE HERE" straight across the image while allowing the placeholder text to scroll, all while aligning it with the large image on the left. Is this achievable? Thanks in advance for your assistance.
/*CUSTOMIZE BODY HERE*/
body {
background: WHITE;
background-attachment: fixed;
font-family: montserrat;
}
a {
text-decoration: none;
color: #999;
}
a:hover {
color: indianred;
}
.title {
font-family: montserrat;
font-weight: 900;
font-size: 6vw;
position: relative;
width: 90%;
left: 200px;
margin-top: 0%;
}
.title2 {
font-family: montserrat;
font-weight: 900;
font-size: 1.10vw;
position: static;
width: 90%;
margin-left: 45%;
}
.scrollingtext p {
width: 100%;
padding: 0 10%;
font-size: 13px;
}
/*IMAGE ALIGNMENT*/
.image {
z-index: -1;
}
.image img {
position: fixed;
width: 50%;
left: -3.5%;
z-index: -1;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%);
}
/*CELL TABLE STYLE*/
.tablerow {
display: table-row;
width: 100%;
}
.table {
display: table;
}
.cell {
display: table-cell;
}
.right {
width: 50%;
}
.left {
width: 40%;
}
.mobile {
display: none;
}
...
<!--INSERT IMAGE-->
<div class="image">
<img src="http://via.placeholder.com/350x1150">
</div>
<div class="scrollingtext">
<!--DESKTOP TITLE AND BYLINE-->
<div class="title">TITLE HERE
<p>
</div>
<div class="title2"><a href="http://www.twitter.com/#"><strong>AUTHOR HERE</strong></a> / TITLE</div>
<!--MOBILE TITLE-->
<div class="table">
<div class="tablerow">
<div class="cell left desktop"></div>
<!--DESKTOP TITLE AND BYLINE-->
<div class="title">
</div>
<div class="cell farright"></div>
</div>
<div class="tablerow">
<div class="cell left desktop">
</div>
<div class="cell right">
<!-- PLACEHOLDER TEXT BELOW -->
<p>This is a set of placeholder text to show an example...</p>
...
...
<p>This is a set of placeholder text to show an example...</p>
</div>
</div>
</div>
</div>