1. <ul class="details">
  2. <li class="type1">
  3. <img src="../img/image.png">
  4. <dl>
  5. <dt>Placehold.it</dt>
  6. <dd>この画像は「Placehold.it」で生成されるダミー画像を使用していました。(URLが変わったみたいなので手作りの画像に変えました。)</dd>
  7. <dd><a href="http://www.placehold.it/" target="_blank">Placehold.it</a></dd>
  8. </dl>
  9. </li>
  10. <li class="type2">
  11. <img src="../img/image.png">
  12. <dl>
  13. <dt>Placehold.it</dt>
  14. <dd>今は「https://placeholdit.imgix.net/~text」というURLの後にパラメーターを付ければ、任意のダミー画像を生成してくれるみたい。</dd>
  15. <dd><a href="http://www.placehold.it/" target="_blank">Placehold.it</a></dd>
  16. </dl>
  17. </li>
  18. <li class="type3">
  19. <img src="../img/image.png">
  20. <dl>
  21. <dt>Placehold.it</dt>
  22. <dd>例えば「https://placeholdit.imgix.net/~text?bg=20b2aa&txtcolor=fff&txtsize=39&txt=image&w=200&h=180」という具合(2017.2現在)。</dd>
  23. <dd><a href="http://www.placehold.it/" target="_blank">Placehold.it</a></dd>
  24. </dl>
  25. </li>
  26. </ul>
  1. /* 略 */
  2. ul {
  3. list-style: none;
  4. top: 0;
  5. height: 180px;
  6. margin: 0;
  7. padding: 0;
  8. text-align: center;
  9. }
  10. ul li,
  11. ul li dl {
  12. width: 200px;
  13. height: 180px;
  14. }
  15. ul {
  16. letter-spacing: -1em;
  17. }
  18. ul li {
  19. display: inline-block;
  20. position: relative;
  21. overflow: hidden;
  22. margin: 0 5px;
  23. letter-spacing: 0;
  24. }
  25. ul dl {
  26. position: absolute;
  27. top: 0;
  28. margin: 0;
  29. padding: 20px 25px;
  30. box-sizing: border-box;
  31. color: #fff;
  32. background: rgba(205,92,92,.9);
  33. }
  34. ul dl dt {
  35. margin-bottom: 0.3em;
  36. }
  37. ul dl dd {
  38. margin: 0;
  39. font-size: 10px;
  40. line-height: 1.6;
  41. text-align: justify;
  42. word-break: break-all;
  43. }
  44. ul dl dd:last-of-type {
  45. margin-top: 10px;
  46. text-align: right;
  47. }
  48. ul a {
  49. padding: 0.3em 0.5em;
  50. background-color: #fff;
  51. }
  52. /* type1 */
  53. .type1 dl {
  54. opacity: 0;
  55. -webkit-transform: translateY(100%);
  56. transform: translateY(100%);
  57. -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  58. transition: opacity 0.6s, transform 0.6s;
  59. }
  60. .type1:hover dl {
  61. opacity: 1;
  62. -webkit-transform: translateY(0);
  63. transform: translateY(0);
  64. }
  65. /* type2 */
  66. .type2 {
  67. overflow: visible;
  68. -webkit-perspective: 1000px;
  69. perspective: 1000px;
  70. }
  71. .type2 img,
  72. .type2 dl {
  73. -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  74. transition: opacity 0.6s, transform 0.6s;
  75. -webkit-backface-visibility: hidden;
  76. backface-visibility: hidden;
  77. }
  78. .type2:hover img {
  79. -webkit-transform: rotateX(180deg);
  80. transform: rotateX(180deg);
  81. }
  82. .type2 dl {
  83. background-color: #cd5c5c;
  84. -webkit-transform: rotateX(-180deg);
  85. transform: rotateX(-180deg);
  86. }
  87. .type2:hover dl {
  88. -webkit-transform: rotateX(0);
  89. transform: rotateX(0);
  90. }
  91. /* type3 */
  92. .type3 dl {
  93. background-color: transparent;
  94. }
  95. .type3 dl dt,
  96. .type3 dl dd {
  97. position: relative;
  98. z-index: 1;
  99. opacity: 0;
  100. transition: opacity 0.3s;
  101. }
  102. .type3:hover dl dt,
  103. .type3:hover dl dd {
  104. opacity: 1;
  105. transition-delay: 0.3s;
  106. }
  107. .type3 dl::before,
  108. .type3 dl::after {
  109. content: "";
  110. display: block;
  111. position: absolute;
  112. top: 0;
  113. left: 0;
  114. width: 100px;
  115. height: 180px;
  116. background: #cd5c5c;
  117. opacity: 0;
  118. -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  119. transition: opacity 0.6s, transform 0.6s;
  120. }
  121. .type3:hover dl::before,
  122. .type3:hover dl::after {
  123. opacity: 0.9;
  124. transition-duration: 0.3s;
  125. }
  126. .type3 dl::before {
  127. -webkit-transform: translateX(-175px) skew(-30deg);
  128. transform: translateX(-175px) skew(-30deg);
  129. }
  130. .type3 dl::after {
  131. -webkit-transform: translateX(275px) skew(-30deg);
  132. transform: translateX(275px) skew(-30deg);
  133. }
  134. .type3:hover dl::before {
  135. -webkit-transform: translateX(0) skew(0);
  136. transform: translateX(0) skew(0);
  137. }
  138. .type3:hover dl::after {
  139. -webkit-transform: translateX(100px) skew(0);
  140. transform: translateX(100px) skew(0);
  141. }
  • Placehold.it
    この画像は「Placehold.it」で生成されるダミー画像を使用していました。(URLが変わったみたいなので手作りの画像に変えちゃいましたけど。)
    Placehold.it
  • Placehold.it
    今は「https://placeholdit.imgix.net/~text」というURLの後にパラメーターを付ければ、任意のダミー画像を生成してくれるみたい。
    Placehold.it
  • Placehold.it
    例えば「https://placeholdit.imgix.net/~text?bg=20b2aa&txtcolor=fff&txtsize=39&txt=image&w=200&h=180」という具合(2017.2現在)。
    Placehold.it