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;
}