Guest User

Untitled

a guest
Feb 25th, 2017
55
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Animación: modifica el valor de la opacidad de 0.5 a 1 */
  2. @keyframes fadeIn {
  3. from {
  4. opacity: .5; }
  5. to {
  6. opacity: 1; }
  7. }
  8. /* La primer imagen se muesra */
  9. .first {
  10. display: block;
  11. }
  12. /* Contenedor princial */
  13. .box-container {
  14. overflow: hidden;
  15. padding: 0;
  16. margin: 0;
  17. }
  18. /* Cntenedor para desplegar las imagenes */
  19. .box-display {
  20. width: 80%;
  21. margin: 0 auto;
  22. position: relative;
  23. }
  24. /* Contenedor de la imagen en si */
  25. .box-img {
  26. display: none;
  27. animation-name: fadeIn;
  28. animation-duration: 2s;
  29. width: 100%;
  30. }
  31. /* Hasta 5oopx la imagen se muestra al 100% */
  32. @media only screen and (max-width: 500px) {
  33. .box-display {
  34. width: 100%;
  35. }
  36. }
  37.  
  38. .box-img img {
  39. width: 100%;
  40. }
  41. /* Titulo de la imagen y su numero */
  42. .caption, .pic-number {
  43. color: white;
  44. padding: .5rem 1rem;
  45. position: absolute;
  46. }
  47. /* Imagén Número... */
  48. .pic-number {
  49. top: 10px;
  50. right: 10px;
  51. color: gray;
  52. }
  53. /* Titulo de la imagen */
  54. .caption {
  55. bottom: 10px;
  56. left: 30%;
  57. font-size: 1.5rem;
  58. font-family: sans-serif;
  59. }
  60. @media only screen and (max-width: 500px) {
  61. .caption {
  62. font-size: 1rem;
  63. }
  64. }
  65.  
  66. .box-display a {
  67. color: gray;
  68. text-decoration: none;
  69. }
  70. /* Posisionar botoner atrás y adelante */
  71. #prev, #next {
  72. padding: 1rem;
  73. position: absolute;
  74. top: 45%;
  75. }
  76. #prev:hover, #next:hover {
  77. background: gray;
  78. opacity: .3;
  79. }
  80. #next {
  81. right: 0;
  82. }
RAW Paste Data