index.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Frame image and title</title>
  6. <style>
  7. /*@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);*/
  8. figure.snip1113 {
  9. font-family: 'Raleway', Arial, sans-serif;
  10. position: relative;
  11. overflow: hidden;
  12. margin: 10px;
  13. min-width: 220px;
  14. max-width: 310px;
  15. width: 100%;
  16. background: #ffffff;
  17. text-align: center;
  18. box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  19. }
  20. figure.snip1113 * {
  21. -webkit-box-sizing: border-box;
  22. box-sizing: border-box;
  23. -webkit-transition: all 0.3s ease-in-out;
  24. transition: all 0.3s ease-in-out;
  25. }
  26. figure.snip1113 img {
  27. max-width: 65%;
  28. margin: 40px auto;
  29. display: block;
  30. position: relative;
  31. border: 3px solid #666666;
  32. padding: 15px 15px 85px 15px;
  33. -webkit-transform: translate(0, 0);
  34. transform: translate(0, 0);
  35. }
  36. figure.snip1113 figcaption {
  37. position: absolute;
  38. height: 120px;
  39. bottom: 0px;
  40. left: 0;
  41. right: 0;
  42. display: block;
  43. }
  44. figure.snip1113 h3 {
  45. background-color: #ffffff;
  46. color: #000000;
  47. font-size: 1.7em;
  48. width: 100%;
  49. padding: 5px 12px;
  50. margin: 0;
  51. text-transform: uppercase;
  52. font-weight: 400;
  53. }
  54. figure.snip1113 h3 span {
  55. font-weight: 800;
  56. }
  57. figure.snip1113 h4 {
  58. margin: 0;
  59. text-transform: uppercase;
  60. letter-spacing: -1px;
  61. opacity: 0.6;
  62. font-size: 1.1em;
  63. }
  64. figure.snip1113.blue img {
  65. border-color: #2472a4;
  66. }
  67. figure.snip1113.blue h3,
  68. figure.snip1113.blue h4 {
  69. color: #2472a4;
  70. }
  71. figure.snip1113.red img {
  72. border-color: #ab3326;
  73. }
  74. figure.snip1113.red h3,
  75. figure.snip1113.red h4 {
  76. color: #ab3326;
  77. }
  78. figure.snip1113.yellow img {
  79. border-color: #e08e0b;
  80. }
  81. figure.snip1113.yellow h3,
  82. figure.snip1113.yellow h4 {
  83. color: #e08e0b;
  84. }
  85. figure.snip1113.green img {
  86. border-color: #229955;
  87. }
  88. figure.snip1113.green h3,
  89. figure.snip1113.green h4 {
  90. color: #229955;
  91. }
  92. figure.snip1113.orange img {
  93. border-color: #d67118;
  94. }
  95. figure.snip1113.orange h3,
  96. figure.snip1113.orange h4 {
  97. color: #d67118;
  98. }
  99. figure.snip1113.navy img {
  100. border-color: #2b3c4e;
  101. }
  102. figure.snip1113.navy h3,
  103. figure.snip1113.navy h4 {
  104. color: #2b3c4e;
  105. }
  106. /* Demo purposes only */
  107. html {
  108. height: 100%;
  109. }
  110. body {
  111. background-color: #212121;
  112. display: flex;
  113. justify-content: center;
  114. align-items: center;
  115. flex-flow: wrap;
  116. margin: 0;
  117. height: 100%;
  118. }
  119. </style>
  120. </head>
  121. <body>
  122. <figure class="snip1113 red">
  123. <img src="pr-sample1.jpg" alt="pr-sample1">
  124. <figcaption>
  125. <h3>Roberto <span>Alvarez</span></h3>
  126. <h4>
  127. Creator
  128. </h4>
  129. </figcaption>
  130. </figure>
  131. <figure class="snip1113 blue hover"><img src="pr-sample3.jpg" alt="pr-sample3">
  132. <figcaption>
  133. <h3>Joshua <span>Franklin</span></h3>
  134. <h4>
  135. Creator
  136. </h4>
  137. </figcaption>
  138. </figure>
  139. <figure class="snip1113"><img src="pr-sample9.jpg" alt="pr-sample9">
  140. <figcaption>
  141. <h3>Dalene <span>Atkinson</span></h3>
  142. <h4>
  143. Creator
  144. </h4>
  145. </figcaption>
  146. </figure>
  147. <script>
  148. // https://codepen.io/littlesnippets/pen/ZbemQo
  149. </script>
  150. </body>
  151. </html>