Все о InstantCMS Все о InstantCMS
demo image 1

Suvorov

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

demo image 2

Nahimov

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

demo image 3

Ushakov

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.

Красивый CSS эффект при наведении на блоки

Красивый CSS эффект при наведении, блоки поворачиваются оригинальным образом задом на перёд, адаптивный.

Код - надо вставить в виджет HTML
  1. <link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
  2. <style>
  3. /* Block Code */
  4. .box{
  5. position: relative;
  6. perspective: 1000px;
  7. }
  8. .box .box-img{
  9. transform: rotateY(0);
  10. transition: all 0.50s ease-in-out 0s;
  11. }
  12. .box:hover .box-img{
  13. transform: rotateY(-90deg);
  14. }
  15. .box .box-img img{
  16. width: 100%;
  17. height: auto;
  18. }
  19. .box .box-content{
  20. width: 100%;
  21. height: 100%;
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. padding: 60px 20px;
  26. text-align: center;
  27. background: rgba(0,0,0,0.7);
  28. transform: rotateY(90deg);
  29. transition: all 0.50s ease-in-out 0s;
  30. }
  31. .box:hover .box-content{
  32. transform: rotateY(0);
  33. }
  34. .box .title{
  35. font-size: 20px;
  36. color: #fff;
  37. text-transform: uppercase;
  38. }
  39. .box .description{
  40. font-size: 14px;
  41. line-height: 24px;
  42. color: #fff;
  43. }
  44. .box .title:after,
  45. .box .description:after{
  46. content: "";
  47. width: 80%;
  48. display: block;
  49. border-bottom: 1px solid #fff;
  50. margin: 15px auto;
  51. }
  52. .box .social-links{
  53. margin: 0;
  54. padding: 0;
  55. list-style: none;
  56. }
  57. .box .social-links li{
  58. display: inline-block;
  59. margin: 0 10px;
  60. }
  61. .box .social-links li a{
  62. font-size: 20px;
  63. color: #a6a6a6;
  64. }
  65. .box .social-links li a:hover{
  66. text-decoration: none;
  67. color: #fff;
  68. }
  69. @media only screen and (max-width: 990px) {
  70. .box{ margin-bottom:20px; }
  71. }
  72. @media only screen and (max-width: 479px) {
  73. .box .box-content{ padding: 20px; }
  74. }
  75. </style>
  76.  
  77. <div class="container">
  78. <div class="row">
  79.  
  80. <div class="col-md-4 col-sm-6">
  81. <div class="box">
  82. <div class="box-img">
  83. <img src="/templates/modern/svit/images/1.jpg" alt="demo image 1">
  84. </div>
  85. <div class="box-content">
  86. <h4 class="title">Suvorov</h4>
  87. <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
  88. <ul class="social-links">
  89. <li><a href="#" class="fa fa-qq"></a></li>
  90. <li><a href="#" class="fa fa-weibo"></a></li>
  91. <li><a href="#" class="fa fa-weixin"></a></li>
  92. </ul>
  93. </div>
  94. </div>
  95. </div>
  96.  
  97. <div class="col-md-4 col-sm-6">
  98. <div class="box">
  99. <div class="box-img">
  100. <img src="/templates/modern/svit/images/1.jpg" alt="demo image 2">
  101. </div>
  102. <div class="box-content">
  103. <h4 class="title">Nahimov</h4>
  104. <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
  105. <ul class="social-links">
  106. <li><a href="#" class="fa fa-qq"></a></li>
  107. <li><a href="#" class="fa fa-weibo"></a></li>
  108. <li><a href="#" class="fa fa-weixin"></a></li>
  109. </ul>
  110. </div>
  111. </div>
  112. </div>
  113.  
  114. <div class="col-md-4 col-sm-6">
  115. <div class="box">
  116. <div class="box-img">
  117. <img src="/templates/modern/svit/images/1.jpg" alt="demo image 3">
  118. </div>
  119. <div class="box-content">
  120. <h4 class="title">Ushakov</h4>
  121. <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
  122. <ul class="social-links">
  123. <li><a href="#" class="fa fa-qq"></a></li>
  124. <li><a href="#" class="fa fa-weibo"></a></li>
  125. <li><a href="#" class="fa fa-weixin"></a></li>
  126. </ul>
  127. </div>
  128. </div>
  129. </div>
  130.  
  131. </div>
  132. </div>
21:25
48
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.