Advertisement
Guest User

Untitled

a guest
Jul 27th, 2017
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.43 KB | None | 0 0
  1. .home-top {
  2. overflow: hidden;
  3. padding-top: 4rem;
  4. padding-bottom: 0px;
  5. }
  6.  
  7. .home-top .featured-content {
  8. position: relative;
  9. }
  10.  
  11. .home-top .featured-content .widget-title {
  12. text-align: center;
  13. margin-bottom: 4rem;
  14. }
  15.  
  16. .home-top .featured-content article.has-post-thumbnail {
  17. position: relative;
  18. padding: 0;
  19. border: 0;
  20. overflow: hidden;
  21. }
  22.  
  23. .home-top .featured-content article.has-post-thumbnail > a {
  24. width: 100%;
  25. height: auto;
  26. overflow: hidden;
  27. display: block;
  28. margin: 0;
  29. }
  30.  
  31. .home-top .featured-content article.has-post-thumbnail > a img {
  32. display: block;
  33. margin: 0;
  34. opacity: 1;
  35. width: 100%;
  36. -webkit-transition: opacity .2s cubic-bezier(0,1,.75,1), transform 2.5s cubic-bezier(0,1,.75,1);
  37. -moz-transition: opacity .2s cubic-bezier(0,1,.75,1), transform 2.5s cubic-bezier(0,1,.75,1);
  38. -ms-transition: opacity .2s cubic-bezier(0,1,.75,1), transform 2.5s cubic-bezier(0,1,.75,1);
  39. -o-transition: opacity .2s cubic-bezier(0,1,.75,1), transform 2.5s cubic-bezier(0,1,.75,1);
  40. transition: opacity .2s cubic-bezier(0,1,.75,1), transform 2.5s cubic-bezier(0,1,.75,1);
  41. }
  42.  
  43. .home-top .featured-content article.has-post-thumbnail:hover > a img {
  44. transform: scale(1.1);
  45. }
  46.  
  47. .home-top .featured-content article.has-post-thumbnail .entry-title {
  48. width: 100%;
  49. }
  50.  
  51. .home-top .featured-content article.has-post-thumbnail .entry-title a {
  52. text-decoration: none;
  53. }
  54.  
  55. @media only screen and (max-width: 800px) {
  56.  
  57. .home-top .featured-content.featuredpost {
  58. width: calc(100% + 2rem);
  59. margin-left: -1rem;
  60. margin-right: -1rem;
  61. }
  62.  
  63. .home-top .featured-content.featuredpost article.has-post-thumbnail {
  64. width: calc(50% - 2rem);
  65. margin: 1rem;
  66. float: left;
  67. }
  68.  
  69. .home-top .featured-content article.has-post-thumbnail .entry-title {
  70. margin: 1rem 0;
  71. }
  72.  
  73. .home-top .featured-content article.has-post-thumbnail {
  74. margin-bottom: 0;
  75. }
  76. }
  77.  
  78. @media only screen and (min-width: 800px) {
  79.  
  80.  
  81. .home-top .featured-content article.has-post-thumbnail:hover > a img {
  82. opacity: .15;
  83. }
  84.  
  85. .home-top .featured-content article.has-post-thumbnail .entry-header {
  86. position: absolute;
  87. left: 0;
  88. right: 0;
  89. z-index: 3;
  90. -webkit-transition: opacity .2s cubic-bezier(0,1,.75,1), bottom .2s cubic-bezier(0,1,.75,1);
  91. -moz-transition: opacity .2s cubic-bezier(0,1,.75,1), bottom .2s cubic-bezier(0,1,.75,1);
  92. -ms-transition: opacity .2s cubic-bezier(0,1,.75,1), bottom .2s cubic-bezier(0,1,.75,1);
  93. -o-transition: opacity .2s cubic-bezier(0,1,.75,1), bottom .2s cubic-bezier(0,1,.75,1);
  94. transition: opacity .2s cubic-bezier(0,1,.75,1), bottom .2s cubic-bezier(0,1,.75,1);
  95. opacity: 0;
  96. bottom: -15%;
  97. text-align: left;
  98. }
  99.  
  100. .home-top .featured-content article.has-post-thumbnail:hover .entry-header {
  101. opacity: 1;
  102. bottom: 0;
  103. }
  104.  
  105. .home-top .featured-content article.has-post-thumbnail .entry-title {
  106. margin: 0;
  107. }
  108.  
  109. .home-top .featured-content article.has-post-thumbnail .entry-header a {
  110. padding: 0 15% 4rem;
  111. margin: 0;
  112. width: 100%;
  113. display: block;
  114. }
  115. }
  116.  
  117. .home-top .entry {
  118. width: 31.6239%;
  119. float: left;
  120. margin-left: 2.5641%;
  121. }
  122.  
  123. .home-top .entry:nth-of-type(3n+1){
  124. margin-left: 0;
  125. }
  126.  
  127. .home-top .entry .entry-title {
  128. font-size: 16px;
  129. text-align: center;
  130. }
  131.  
  132. @media only screen and (max-width: 860px) {
  133.  
  134. .home-top .entry {
  135. width: 100%;
  136. float: none;
  137. margin: auto;
  138. }
  139.  
  140. .home-top {
  141. margin-bottom: 40px;
  142. }
  143.  
  144. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement