imageview.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /**
  2. * @name imageview.css
  3. * @author Tobias Reich
  4. * @copyright 2014 by Tobias Reich
  5. */
  6. #imageview {
  7. position: fixed;
  8. display: none;
  9. width: 100%;
  10. min-height: 100%;
  11. background-color: rgba(10,10,10,.98);
  12. transition: background-color .3s;
  13. }
  14. /* Modes ------------------------------------------------*/
  15. #imageview.view {
  16. background-color: inherit;
  17. }
  18. #imageview.full {
  19. background-color: rgba(0,0,0,1);
  20. }
  21. /* ImageView ------------------------------------------------*/
  22. #imageview #image {
  23. position: absolute;
  24. top: 60px;
  25. right: 30px;
  26. bottom: 30px;
  27. left: 30px;
  28. background-repeat: no-repeat;
  29. background-position: 50% 50%;
  30. background-size: contain;
  31. transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(0.51,.92,.24,1.15);
  32. animation-name: zoomIn;
  33. animation-duration: .3s;
  34. animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  35. }
  36. #imageview #image.small {
  37. top: 50%;
  38. right: auto;
  39. bottom: auto;
  40. left: 50%;
  41. }
  42. #imageview #image.full {
  43. top: 0px;
  44. right: 0px;
  45. bottom: 0px;
  46. left: 0px;
  47. }
  48. /* Previous/Next Buttons ------------------------------------------------*/
  49. #imageview .arrow_wrapper {
  50. position: fixed;
  51. width: 20%;
  52. height: calc(100% - 60px);
  53. top: 60px;
  54. z-index: 1;
  55. }
  56. #imageview .arrow_wrapper.previous {
  57. left: 0;
  58. }
  59. #imageview .arrow_wrapper.next {
  60. right: 0;
  61. }
  62. #imageview .arrow_wrapper a {
  63. position: fixed;
  64. top: 50%;
  65. margin-top: -10px;
  66. color: #fff;
  67. font-size: 50px;
  68. text-shadow: 0px 1px 2px #000;
  69. cursor: pointer;
  70. opacity: 0;
  71. z-index: 2;
  72. transition: opacity .2s;
  73. }
  74. #imageview .arrow_wrapper:hover a {
  75. opacity: .2;
  76. }
  77. #imageview .arrow_wrapper a#previous {
  78. left: 20px;
  79. }
  80. #imageview .arrow_wrapper a#next {
  81. right: 20px;
  82. }