Rolodex.css
.photo_rolodex {
position:relative;
background:black;
color:white;
}
.photo_rolodex wrapper {
width:auto;
display:block;
}
.photo_rolodex img {
max-height:100%;
min-height:10rem;
max-width:60rem;
min-width:10rem;
max-height:30rem;
display:block;
}
.photo_rolodex .hidden {
display:none;
}
.photo_rolodex .jsclass-left-arrow {
position:absolute;
left:0;
height:100%;
vertical-align:middle;
text-align:center;
width:4rem;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-content:center;
align-items:center;
font-size: 2.5rem;
font-weight:bolder;
cursor:pointer;
opacity:0.0;
}
.photo_rolodex .jsclass-right-arrow {
position:absolute;
right:0;
top:0;
height:100%;
vertical-align:middle;
text-align:center;
width:4rem;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-content:center;
align-items:center;
font-size:2.5rem;
font-weight:bolder;
cursor:pointer;
opacity:0.0;
}
.photo_rolodex .title {
position:absolute;
top:0;
left:0;
right:0;
padding-left:4rem;
background:rgba(0,0,0,0.6 );
}
.photo_rolodex:hover .jsclass-right-arrow, .photo_rolodex:hover .jsclass-left-arrow {
opacity:1.0;
}
.photo_rolodex:hover .title {
left:4rem;
right:4rem;
padding-left:0;
}