Advertisement
Guest User

Untitled

a guest
May 26th, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.56 KB | None | 0 0
  1. html, body {
  2. height: 100%;
  3. }
  4.  
  5. .break {
  6. position: relative;
  7. width: 100%;
  8. }
  9.  
  10. #trainer {
  11. div.col-md {
  12. padding: 5px !important;
  13. }
  14. }
  15.  
  16. .img-container {
  17. width: 100%;
  18. position: relative;
  19. background: red;
  20. transition: 0;
  21.  
  22. img {
  23. width: 100%;
  24. filter: grayscale(100%);
  25. }
  26.  
  27. .overlay {
  28. //position: absolute;
  29. //top: 0;
  30. //bottom: 0;
  31. //left: 0;
  32. //right: 0;
  33. background: rgba(0, 0, 0, .3);
  34.  
  35. p {
  36. //position: absolute;
  37. //bottom: 0;
  38. text-align: center;
  39. color: white;
  40. //left: 0;
  41. //right: 0;
  42. }
  43. }
  44.  
  45. &:hover {
  46. background: green !important;
  47. position: absolute;
  48. width: 120%;
  49. margin-left: -10%;
  50. margin-top: -15%;
  51. z-index: +1;
  52. transition: all .12s linear;
  53.  
  54. img {
  55. filter: grayscale(0%);
  56. transition: filter .12s linear;
  57. }
  58.  
  59. .overlay {
  60. opacity: 0;
  61. transition: opacity .12s linear;
  62. }
  63. }
  64.  
  65. &.affe ~ div {
  66. background: purple;
  67. }
  68. }
  69.  
  70. @media (min-width: 576px){
  71. .img-container {
  72. .overlay {
  73. position: absolute;
  74. top: 0;
  75. bottom: 0;
  76. left: 0;
  77. right: 0;
  78.  
  79. p {
  80. position: absolute;
  81. bottom: 0;
  82. left: 0;
  83. right: 0;
  84. }
  85. }
  86. }
  87. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement