%PDF- %PDF-
Direktori : /home/tojsat/www/ydx/css/ |
Current File : /home/tojsat/www/ydx/css/effect.css |
.grid { z-index:1000; padding: 20px 20px 20px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center; } .grid li { display: inline-block; width: 24%; margin: 0; padding: 5px; text-align: left; position: relative; } .grid figure { margin: 0; position: relative; } .grid figure img { max-width: 100%; display: block; position: relative; } .grid figcaption { position: absolute; top: 0; left: 0; padding: 5px; background: #2c3f52; color: #ed4e6e; } .grid figcaption h3 { margin: 0; padding: 0; color: #fff; } .grid figcaption h4 { margin: 0; padding: 0; color: #fff; } .grid figcaption h5 { margin: 0; padding: 0; color: #fff; } .grid figcaption span:before { content: 'by '; } .grid figcaption span { color: red; } .grid figcaption a { text-align: center; padding: 5px 5px; border-radius: 2px; display: inline-block; text-decoration: none; /* background: #ed4e6e; color: #fff; */ } /* Caption Style 3 */ .cs-style-3 figure { overflow: hidden; } .cs-style-3 figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .cs-style-3 figcaption { height: 100px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } .no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } .cs-style-3 figcaption a { position: absolute; margin: 20px; /* right: 20px; */ } @media screen and (max-width: 31.5em) { .grid { padding: 10px 10px 10px 10px; } .grid li { width: 100%; /*min-width: 300px;*/ } }