react-zoomify/demo/style.css

Image Zooming Library for react

body{
  font-family: 'Lato'
}

.button-transparent{
  outline: none;
  background: transparent;
  border:1px solid #ddd;
  border-radius: 5px;
  width: 60px;
  height:30px;
  color:#0bbea1;

  line-height: 0px;
  font-size: 14px;
  text-align: center;
  cursor: zoom-in;
}
.button-transparent:hover{
  border:1px solid #aaa;
}

.button-toolbar.button-active{
  background: #ccc;
}
.button-toolbar.middle{
  border-radius: 0px;
}
.button-toolbar.left{
  border-radius: 5px 0px 0px 5px ;
  margin-left: 100px;
  margin-top:30px  
}
.button-toolbar.right{
  border-radius: 0px 5px 5px 0px  
}
.image{

  box-shadow: none;
  transform: scale(1);
  -webkit-transition: box-shadow .2s ease-out,transform .2s ease-out ;
  -moz-transition: box-shadow .2s ease-out, transform .2s ease-out ;
  transition: box-shadow .2s ease-out,transform .2s ease-out  ;
  cursor: pointer
}
.image:hover
{
  box-shadow:0px 3px 3px  rgba(0, 0,0, .3);
  transform: scale(1.1);
  -webkit-transition: box-shadow .3s ease-out,transform .2s ease-out ;
  -moz-transition: box-shadow .3s ease-out,transform .2s ease-out ;
  transition: box-shadow .3s ease-out,transform .2s ease-out ;
}