Здесь будет что-то полезное
...
Отредактировано Hilda (2015-11-10 22:30:27)
Lost in The Future - Test |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Lost in The Future - Test » Гостевая » Примеры кодов
Здесь будет что-то полезное
...
Отредактировано Hilda (2015-11-10 22:30:27)
<style> .grid-cell { display: inline-block; vertical-align: top; } .grid-row { text-align: center; } figure { margin: 10px 10px!important; position: relative; width: 250px; max-height: 105px; overflow: hidden; transition: max-height 0.15s ease-out; box-shadow: 0 0 15px #D99A6C; background: #FAEBD7; border: 1px #D99A6C solid; border-radius: 17px 7px 17px 7px } figure img { max-width: 100%; display: block; position: relative; } figcaption { margin-top: -50px!important; padding: 20px; color: #9E5B40; } figcaption h3 { margin: 0; padding: 0; color: #D99A6C; } figcaption span:before { content: 'by '; } figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; } figure img { z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; box-shadow: 0 0 8px #933709; border-radius: 5px 5px 5px 5px; } figure:hover { max-height: 1400px; transition: max-height 0.25s ease-in; } figure:hover img, .cs-style-6 figure.cs-hover img { -webkit-transform: translateY(-10px) scale(0.5); -moz-transform: translateY(-10px) scale(0.5); -ms-transform: translateY(-10px) scale(0.5); transform: translateY(-10px) scale(0.5); } figcaption li { margin-left: 30% } figcaption h3 { margin-top: 60%; text-align: center; } figcaption a { position: absolute; bottom: 20px; right: 20px; } </style> <div class="grid-row"> <div class="grid-cell"> <figure> <img src="http://s3.uploads.ru/t/crjOm.gif" alt="img05"> <figcaption> <h3>Оборотни, по ходу</h3> <ul> <li>Оборотень 1</li> <li>Оборотень 2</li> <li>Оборотень 3</li> <li>Оборотень 4</li> <li>Оборотень 5</li> <li>Оборотень 6</li> <li>Оборотень 7</li> <li>Оборотень 8</li> <li>Оборотень 9</li> <li>Оборотень 10</li> <li>Оборотень 11</li> <li>Оборотень 12</li> </ul> </figcaption> </figure> </div> <div class="grid-cell"> <figure> <img src="http://s7.uploads.ru/t/4wOXW.gif" alt="img05"> <figcaption> <h3>Оборотни, по ходу</h3> <ul> <li>Оборотень 1</li> <li>Оборотень 2</li> <li>Оборотень 3</li> <li>Оборотень 4</li> <li>Оборотень 5</li> <li>Оборотень 6</li> <li>Оборотень 7</li> <li>Оборотень 8</li> <li>Оборотень 9</li> <li>Оборотень 10</li> <li>Оборотень 11</li> <li>Оборотень 12</li> </ul> </figcaption> </figure> </div> </div> <div class="grid-row"> <div class="grid-cell"> <figure> <img src="http://s7.uploads.ru/qfeUT.gif" alt="img05"> <figcaption> <h3>Маньяки какие-то</h3> <ul> <li>Маньяк 1</li> <li>Маньяк 2</li> <li>Маньяк 3</li> <li>Маньяк 4</li> <li>Маньяк 5</li> <li>Маньяк 6</li> <li>Маньяк 7</li> <li>Маньяк 8</li> </ul> </figcaption> </figure> </div> <div class="grid-cell"> <figure> <img src="http://s7.uploads.ru/80Lcn.gif" alt="img05"> <figcaption> <h3>Маньяки какие-то</h3> <ul> <li>Маньяк 1</li> <li>Маньяк 2</li> <li>Маньяк 3</li> <li>Маньяк 4</li> <li>Маньяк 5</li> <li>Маньяк 6</li> <li>Маньяк 7</li> <li>Маньяк 8</li> </ul> </figcaption> </figure> </div> </div>
<style> .grid-cell { display: inline-block; vertical-align: top; } .grid-row { text-align: center; } figure { margin: 10px 10px!important; position: relative; width: 250px; max-height: 105px; overflow: hidden; transition: max-height 0.15s ease-out; box-shadow: 0 0 15px #D99A6C; background: #FAEBD7; border: 1px #D99A6C solid; border-radius: 17px 7px 17px 7px } figure img { max-width: 100%; display: block; position: relative; } figcaption { margin-top: -50px!important; padding: 20px; color: #9E5B40; } figcaption h3 { margin: 0; padding: 0; color: #D99A6C; } figcaption span:before { content: 'by '; } figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; } figure img { z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; box-shadow: 0 0 8px #933709; border-radius: 5px 5px 5px 5px; } figure:hover { max-height: 1400px; transition: max-height 0.25s ease-in; } figure:hover img, .cs-style-6 figure.cs-hover img { -webkit-transform: translateY(-10px) scale(0.5); -moz-transform: translateY(-10px) scale(0.5); -ms-transform: translateY(-10px) scale(0.5); transform: translateY(-10px) scale(0.5); } figcaption li { margin-left: 30% } figcaption h3 { margin-top: 60%; text-align: center; } figcaption a { position: absolute; bottom: 20px; right: 20px; } </style> <div class="grid-row"> <div class="grid-cell"> <figure> <img src="http://s3.uploads.ru/t/crjOm.gif" alt="img05"> <figcaption> <h3>Оборотни, по ходу</h3> <ul> <li>Оборотень 1</li> <li>Оборотень 2</li> <li>Оборотень 3</li> <li>Оборотень 4</li> <li>Оборотень 5</li> <li>Оборотень 6</li> <li>Оборотень 7</li> <li>Оборотень 8</li> <li>Оборотень 9</li> <li>Оборотень 10</li> <li>Оборотень 11</li> <li>Оборотень 12</li> </ul> </figcaption> </figure> </div> <div class="grid-cell"> <figure> <img src="http://s7.uploads.ru/t/4wOXW.gif" alt="img05"> <figcaption> <h3>Оборотни, по ходу</h3> <ul> <li>Оборотень 1</li> <li>Оборотень 2</li> <li>Оборотень 3</li> <li>Оборотень 4</li> <li>Оборотень 5</li> <li>Оборотень 6</li> <li>Оборотень 7</li> <li>Оборотень 8</li> <li>Оборотень 9</li> <li>Оборотень 10</li> <li>Оборотень 11</li> <li>Оборотень 12</li> </ul> </figcaption> </figure> </div> </div> <div class="grid-row"> <div class="grid-cell"> <figure> <img src="http://s7.uploads.ru/qfeUT.gif" alt="img05"> <figcaption> <h3>Маньяки какие-то</h3> <ul> <li>Маньяк 1</li> <li>Маньяк 2</li> <li>Маньяк 3</li> <li>Маньяк 4</li> <li>Маньяк 5</li> <li>Маньяк 6</li> <li>Маньяк 7</li> <li>Маньяк 8</li> </ul> </figcaption> </figure> </div> <div class="grid-cell"> <figure> <img src="http://s7.uploads.ru/80Lcn.gif" alt="img05"> <figcaption> <h3>Маньяки какие-то</h3> <ul> <li>Маньяк 1</li> <li>Маньяк 2</li> <li>Маньяк 3</li> <li>Маньяк 4</li> <li>Маньяк 5</li> <li>Маньяк 6</li> <li>Маньяк 7</li> <li>Маньяк 8</li> </ul> </figcaption> </figure> </div> </div>
Вы здесь » Lost in The Future - Test » Гостевая » Примеры кодов