{"id":1481,"date":"2015-09-19T15:32:55","date_gmt":"2015-09-19T06:32:55","guid":{"rendered":"http:\/\/agn.jp\/blog\/?p=1481"},"modified":"2015-09-19T15:32:55","modified_gmt":"2015-09-19T06:32:55","slug":"%e3%80%8ccss%e3%81%a0%e3%81%91%e3%81%a7%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%97%e3%81%a6","status":"publish","type":"post","link":"http:\/\/agn.jp\/blog\/?p=1481","title":{"rendered":"\u300cCSS\u3060\u3051\u3067\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u3066\u304f\u308b\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u300d\u3092\u3084\u3063\u3066\u307f\u305f"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\u3002yasai\u3067\u3059\u3002<\/p>\n

\u30b7\u30eb\u30d0\u30fc\u30a6\u30a3\u30fc\u30af\u7a81\u5165\u3067\u3059\u306d\uff01
\n\u307f\u306a\u3055\u3093\u306f\u305f\u304f\u3055\u3093\u4f11\u3081\u305d\u3046\u3067\u3059\u304b\uff1f<\/p>\n

\"1509css_caption\"<\/a><\/p>\n

Ri-mode Rainbow<\/a>\u69d8\u306e\u30d6\u30ed\u30b0\u3067\u300c\u753b\u50cf\u306b\u30de\u30a6\u30b9\u3092\u4e57\u305b\u308b\u3068\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u3057\u3066\u51fa\u3066\u304f\u308b\u306e\u3092CSS\u3060\u3051\u3067\u8a2d\u7f6e<\/a>\u300d\u3068\u3044\u3046\u306e\u304c\u3042\u3063\u305f\u306e\u3067\u3001\u52c9\u5f37\u304c\u3066\u3089\u50d5\u3082\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

Ri-mode Rainbow<\/a>\u3055\u3093\u3067\u306f\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3059\u308b\u30a8\u30ea\u30a2\u3092\u8a2d\u3051\u3066\u3084\u3063\u3066\u304a\u3089\u308c\u307e\u3057\u305f\u304c\u3001\u50d5\u306e\u306f\u753b\u50cf\u306e\u89aa\u30dc\u30c3\u30af\u30b9\u306b\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3057\u305f\u3089\u753b\u50cf\u304c\u30b9\u30e9\u30a4\u30c9\u3057\u3066\u304f\u308b\u4ed5\u639b\u3051\u3067\u3059\u3002<\/p>\n

\"sc20150919\"
\n\u3010DEMO\u3011<\/a><\/p>\n

HTML<\/h2>\n
\r\n<div class="photo">\r\n    <img src="your-image.jpg" alt="">\r\n    <div class="caption">\r\n        <div>\r\n            <p>\u3053\u3053\u306b\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3<\/p>\r\n            <p><a href="">\u30dc\u30bf\u30f3\u3068\u304b<\/a><\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/div><\/pre>\n
\u89aa\u8981\u7d20\u3092.photo\u3001\u305d\u306e\u4e2d\u306b\u753b\u50cf\u3068\u3001\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u7528\u3001\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u3068\u3044\u3046\u3088\u308a\u3044\u308d\u3044\u308d\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b.caption\u3067\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u3057\u307e\u3059\u3002<\/p>\n
CSS<\/h2>\n
\u203bsass\u3067\u66f8\u3044\u3066\u307e\u3059\u3002\u3053\u3061\u3089\u306e\u65b9\u304c\u898b\u901a\u3057\u304c\u826f\u3044\u6c17\u304c\u3059\u308b\u306e\u3067\u3002<\/p>\n
\r\n.photo{\r\n    position: relative;\r\n    overflow: hidden;\r\n    text-align: center;\r\n    img{\r\n        max-width: 100%;\r\n        height: auto;\r\n    }\r\n    .caption{\r\n        position: absolute;\r\n        top: 100%;\r\n        left: 0;\r\n        z-index: 1;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.7);\r\n        transition: top 0.5s ease;\r\n    }\r\n    &:hover .caption{\r\n        top: 0;\r\n    }\r\n}\r\n.caption{\r\n    &>div{\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translateX(-50%) translateY(-50%);\r\n        text-align: center;\r\n        color: #fff;\r\n    }\r\n}<\/pre>\n
\u5927\u307e\u304b\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u90e8\u5206\u3092\u629c\u7c8b\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u8981\u70b9\u306f\u3001<\/p>\n