Help cs help

[summerwine]

Hey there! I'm trying to add an invisible scroll box on the right side of the image with a hover. I'm having trouble coding that, though. Help would be appreciated. (:

Spoiler: how code looks

[class=header] background: url('https://66.media.tumblr.com/e33b59e37b6e63ed44587621d23ee8b0/tumblr_pm2gk47VY61w1szwj_540.jpg'); width: 530px; height: 110px; margin: auto; [/class] [class=pfp] background: url('https://66.media.tumblr.com/1545c0d82a4499f2c9ed429b651e6d94/tumblr_okieguKdOO1slzelwo1_540.png'); width: 220px; height: 350px; background-size: cover; margin-left: 361px; [/class] [class=pfptext] position: relative; width: 100%; height: 100%; overflow-Y: scroll; overflow-X: hidden; opacity: 0; transition: opacity 1s; color: white; background-color: rgb(0,0,0,0.7); [/class] [class name=pfptext state=hover] opacity: 1; [/class] [div class=header] [/div]
[div class=pfp][div class=pfptext]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu. Maecenas accumsan lacus vel facilisis volutpat est. Donec et odio pellentesque diam volutpat commodo. Turpis massa sed elementum tempus egestas sed sed. Tincidunt vitae semper quis lectus nulla at. Tincidunt eget nullam non nisi est sit amet facilisis magna. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Sed tempus urna et pharetra pharetra massa massa. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Volutpat sed cras ornare arcu. In iaculis nunc sed augue lacus. Est lorem ipsum dolor sit. Vestibulum mattis ullamcorper velit sed ullamcorper.

[/div][/div]

Spoiler: code

[nobr]
[class=header]
background: url('https://66.media.tumblr.com/e33b59e37b6e63ed44587621d23ee8b0/tumblr_pm2gk47VY61w1szwj_540.jpg');
width: 530px;
height: 110px;
margin: auto;
[/class]

[class=pfp]
background: url('https://66.media.tumblr.com/1545c0d82a4499f2c9ed429b651e6d94/tumblr_okieguKdOO1slzelwo1_540.png');
width: 220px;
height: 350px;
background-size: cover;
margin-left: 361px;
[/class]

[class=pfptext]
position: relative;
width: 100%;
height: 100%;
overflow-Y: scroll;
overflow-X: hidden;
opacity: 0;
transition: opacity 1s;
color: white;
background-color: rgb(0,0,0,0.7);
[/class]

[class name=pfptext state=hover]
opacity: 1;
[/class]

[div class=header]   [/div]
[br][/br]
[div class=pfp][div class=pfptext][div=position: relative; width: calc(100%  - 20px);height: 330px; overflow: hidden; opacity:1; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: white; font-size: 0.9em; font-align: justify;][font=Playfair Display]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu. Maecenas accumsan lacus vel facilisis volutpat est. Donec et odio pellentesque diam volutpat commodo. Turpis massa sed elementum tempus egestas sed sed. Tincidunt vitae semper quis lectus nulla at. Tincidunt eget nullam non nisi est sit amet facilisis magna. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Sed tempus urna et pharetra pharetra massa massa. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Volutpat sed cras ornare arcu. In iaculis nunc sed augue lacus. Est lorem ipsum dolor sit. Vestibulum mattis ullamcorper velit sed ullamcorper.[/font][/div][/div][/div][/div]
[/nobr]

 

[Fable]

Here is a quick and messy edit.

[nobr]
[class=header]
background: url('https://66.media.tumblr.com/e33b59e37b6e63ed44587621d23ee8b0/tumblr_pm2gk47VY61w1szwj_540.jpg');
width: 530px;
height: 110px;
margin: auto;
[/class]

[class=pfp]
background: url('https://66.media.tumblr.com/1545c0d82a4499f2c9ed429b651e6d94/tumblr_okieguKdOO1slzelwo1_540.png');
width: 220px;
height: 350px;
background-size: cover;
margin-left: 361px;
[/class]

[class=pfptext]
position: relative;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
color: white;
background-color: rgb(0,0,0,0.7);

[/class]

[class name=pfptext state=hover]
opacity: 1;
[/class]

[div class=header]   [/div]
[br][/br]
[div class=pfp][div class=pfptext][div=width: 100%;position: relative; height: 350px; opacity:1;overflow:hidden;][div=width:100%; padding-right:150px; height: 100%; overflow: auto; color: white; font-size: 0.9em; font-align: justify;][div=padding:10px;][font=Playfair Display]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu. Maecenas accumsan lacus vel facilisis volutpat est. Donec et odio pellentesque diam volutpat commodo. Turpis massa sed elementum tempus egestas sed sed. Tincidunt vitae semper quis lectus nulla at. Tincidunt eget nullam non nisi est sit amet facilisis magna. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Sed tempus urna et pharetra pharetra massa massa. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Volutpat sed cras ornare arcu. In iaculis nunc sed augue lacus. Est lorem ipsum dolor sit. Vestibulum mattis ullamcorper velit sed ullamcorper.[/font][/div][/div][/div][/div][/div]
[/nobr]