Now-and-then pictures: Oella Avenue in Ellicott City

1939

2018

Then

A child stands on Oella Avenue below the streetcar bridge at Ellicott City in 1939. The No. 9 streetcar ran on the line that was originally part of the Catonsville and Ellicott City Electric Railway Company. Baltimore Sun

Now

A stone abutment is all that remains of the trolley bridge over Oella Avenue in Ellicott City. The former streetcar line was converted to a walking trail in the 1990s.Barbara Haddock Taylor / Baltimore Sun

https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js
http://data.baltimoresun.com/mobile/js/cocoen.min.js?v11
document.addEventListener(‘DOMContentLoaded’, function(){
new Cocoen(); });

#wrap {
font-family: georgia, times, serif;
color: #333;
margin: 0;
padding: 0;
}
.container img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
margin-top: -47px;
position: relative;
width: 100%;
}
.years {
font-family: arial, helvetica, sans-serif;
width: 34px;
height: 17px;
font-weight: 500;
letter-spacing: -.01em;
position: relative;
z-index: 1;
font-size: 1.1em;
padding-top: 3px;
}
#before-year {
left: 0%;
text-align: left;
padding-left: 7px !important;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
top: -7px;
}
#after-year {
color: #000;
background-color: rgba(255, 255, 255, 0.6);
left: calc(100% – 41px);
text-align: right;
padding-right: 7px !important;
top: -27px;
}
.caps {
width: calc (100% – 9px);
height: 80px;
padding: 3px 8px 0 1px;
}
.caps p {
margin: 0px;
padding: 8px 4px 4px 0;
font-size: .98em;
line-height: 133%;
float: right;
width: calc(100% – 72px) !important;
}
#thencap {
background-color: #f8f8f8;
}
#nowcap {
background-color: #f2f2f2;
}
.label {
float: left;
margin: 8px 10px 4px 6px;
font-size: 1.33em;
padding: 4px 8px 4px 6px;
text-transform: uppercase;
font-style: italic;
text-align: center;
height: 14px;
}
#thenlab {
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
#nowlab {
color: #000;
background-color: rgba(255, 255, 255, 0.6);
}
.credit {
font-size: .665em;
font-weight: 700;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: .01em;
display: inline-block;
margin-left; 2px;
position: relative;
top: -1px;
}
@media all and (min-width: 440px) {
.caps p {
padding: 9px 5px 5px 0;
font-size: 1.1em;
line-height: 140%;
margin-right: 10px;
width: calc(100% – 98px) !important;
}
.label {
margin: 6px 12px 4px 3px;
font-size: 1.5em;
padding: 3px 6px 6px 6px;
height: 17px;
}
.caps {
padding: 4px 4px 0 4px;
}
}
@media all and (min-width: 520px) {
.caps {
width: calc(50% – 8px);
float: left;
height: 195px;
}
.caps p {
font-size: 1.2em;
line-height: 146%;
margin-right: 10px;
width: calc(100% – 85px) !important;
}
.credit {
width: 100%;
}
.years {
font-size: 1.12em;
}
}
@media all and (min-width: 550px) {
.caps p {
font-size: 1.2em;
line-height: 148%;
margin-right: 12px;
width: calc(100% – 96px) !important;
}
.credit {
margin-top: 2px;
}
.label {
font-size: 1.8em;
}
}
@media all and (min-width: 600px) {
.caps {
height: 170px;
}
}
@media all and (min-width: 675px) {
.caps {
padding: 7px 7px 0 7px;
width: calc(50% – 14px);
height: 145px;
}
}
@media all and (min-width: 750px) {
.caps p {
font-size: 1.25em;
line-height: 150%;
}
.credit {
font-size: .75em;
margin-top: 4px;
}
.years {
height: 23px;
width: 39px;
font-size: 1.4em;
letter-spacing: -.02em;
padding-top: 5px;
}
#before-year {
padding-left: 8px !important;
top: 9px;
}
#after-year {
padding-right: 8px !important;
left: calc(100% – 47px);
top: -19px;
}
.label {
padding: 4px 8px 8px 8px;
height: 21px;
}
.caps p {
width: calc(100% – 105px) !important;
}
}
@media all and (min-width: 940px) {
.caps p {
font-size: 1.33em;
}
.credit {
margin-top: 5.3px;
}
.label {
font-size: 2em;
padding: 5px 9px 9px 9px;
height: 22px;
}
.caps p {
width: calc(100% – 109px) !important;
}
.years {
width: 44px;
height: 25px;
letter-spacing: -.03em;
font-size: 1.5em;
padding-top: 6px;
}
#after-year {
top: -16px;
left: calc(100% – 54px);
padding-right: 10px !important;
}
#before-year {
top: 15px;
padding-left: 10px !important;
}
}
@media all and (min-width: 1050px) {
.caps {
padding: 10px 7px 0 10px;
width: calc(50% – 17px);
height: 145px;
}
.label {
padding: 4px 12px 8px 8px;
height: 21px;
}
.credit {
margin-top: 7px;
}
.caps p {
font-size: 1.4em;
width: calc(100% – 115px) !important;
}
}
@media all and (min-width: 1200px) {
.years {
width: 48px;
height: 25px;
letter-spacing: -.03em;
font-size: 1.667em;
padding-top: 6px;
}
.caps p {
font-size: 1.5em;
}
#after-year {
left: calc(100% – 58px);
}
}