Все о InstantCMS Все о InstantCMS

Белоруссия

Респу́блика Белару́сь

Олимпиада

The Rio Olympics

ВМЕСТЕ

Россия & Белоруссия

Belarus Effect для блоков

Адаптивные блоки Bootstrap с эффектом наведения

Код - надо вставить в виджет HTML
  1. <style>
  2. .box{
  3. position: relative;
  4. box-shadow: 0 0 5px #555;
  5. }
  6. .box img{
  7. width: 100%;
  8. height: auto;
  9. transition: all 0.3s ease 0s;
  10. }
  11. .box:hover img{
  12. filter: brightness(0.4);
  13. }
  14. .box .boxContent{
  15. width: 80%;
  16. height: 80%;
  17. position: absolute;
  18. top: 10%;
  19. left: 10%;
  20. border-top: 1px solid #fff;
  21. border-bottom: 1px solid #fff;
  22. text-align: center;
  23. transform: scale(0, 1);
  24. transition: all 0.35s ease 0s;
  25. }
  26. .box:hover .boxContent{
  27. transform: scale(1);
  28. }
  29. .box .title{
  30. font-size: 25px;
  31. font-weight: 600;
  32. color: #fff;
  33. margin: 23% 0 20px;
  34. transform: translate3d(0, -100%, 0);
  35. transition: all 0.35s ease 0s;
  36. }
  37. .box .post{
  38. display: block;
  39. font-size: 16px;
  40. color: #fff;
  41. text-transform: capitalize;
  42. transform: translate3d(0, 100%, 0);
  43. transition: all 0.35s ease 0s;
  44. }
  45. .box:hover .title,
  46. .box:hover .post{
  47. transform: translate3d(0, 0, 0);
  48. }
  49. @media only screen and (max-width: 990px){
  50. .box{ margin-bottom: 25px; }
  51. }
  52. </style>
  53.  
  54. <div class="container">
  55. <div class="row">
  56.  
  57. <div class="col-md-4 col-sm-12">
  58. <div class="box">
  59. <img src="/templates/modern/svit/images/1.jpg">
  60. <div class="boxContent">
  61. <h3 class="title">Белоруссия</h3>
  62. <span class="post">Респу́блика Белару́сь</span>
  63. </div>
  64. </div>
  65. </div>
  66.  
  67. <div class="col-md-4 col-sm-12">
  68. <div class="box">
  69. <img src="/templates/modern/svit/images/1.jpg">
  70. <div class="boxContent">
  71. <h3 class="title">Олимпиада</h3>
  72. <span class="post">The Rio Olympics</span>
  73. </div>
  74. </div>
  75. </div>
  76.  
  77. <div class="col-md-4 col-sm-12">
  78. <div class="box">
  79. <img src="/templates/modern/svit/images/1.jpg">
  80. <div class="boxContent">
  81. <h3 class="title">ВМЕСТЕ</h3>
  82. <span class="post">Россия & Белоруссия</span>
  83. </div>
  84. </div>
  85. </div>
23:41
275
0
Михаил 2 месяца назад #

Спасибо!

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.