Created
December 6, 2017 14:16
-
-
Save kharakhordindemo/03dc34d57ad8c1f765339754ffef10d7 to your computer and use it in GitHub Desktop.
Анимация при наведении
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Анимация при наведении</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="portfolio"> | |
| <ul> | |
| <li> | |
| <span class="descr">Project description</span><img src="img/%20img-1-lg.jpg" alt="picture"> | |
| </li> | |
| <li> | |
| <span class="descr">Project description</span><img src="img/img-2-lg.jpg" alt="picture"> | |
| </li> | |
| <li> | |
| <span class="descr">Project description</span><img src="img/img-3-lg.jpg" alt="picture"> | |
| </li> | |
| <li> | |
| <span class="descr">Project description</span><img src="img/img-4-lg.jpg" alt="picture"> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*---Сброс стилей---*/ | |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| outline: 0; | |
| font-weight: inherit; | |
| font-style: inherit; | |
| font-size: 100%; | |
| font-family: inherit; | |
| vertical-align: baseline; | |
| } | |
| :focus { | |
| outline: 0; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| table { | |
| border-collapse: separate; border-spacing: 0; | |
| } | |
| caption, th, td { | |
| text-align: left; | |
| font-weight: normal; | |
| } | |
| strong,b{ | |
| font-weight:bold | |
| } | |
| em{ | |
| font-style:italic | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| *{ | |
| box-sizing: border-box; | |
| } | |
| /*---Конец сброса стилей---*/ | |
| /*---Анимация при наведении---*/ | |
| body{ | |
| padding: 50px; | |
| background-color: deepskyblue; | |
| font-family: "Arial", sans-serif; | |
| } | |
| .portfolio{ | |
| margin: 0 auto; | |
| width: 809px; | |
| } | |
| .portfolio ul{ | |
| font-size: 0; | |
| } | |
| .portfolio li{ | |
| position: relative; | |
| display: inline-block; | |
| width: 200px; | |
| margin-right: 3px; | |
| text-align: center; | |
| cursor: pointer; | |
| overflow: hidden; | |
| } | |
| .portfolio li:hover .descr{ | |
| opacity: 1; | |
| top: 0; | |
| } | |
| .portfolio li:last-child{ | |
| margin-right: 0; | |
| } | |
| .portfolio img{ | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .descr{ | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 150px; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| color: #fff; | |
| font-size: 20px; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| opacity: 0; | |
| transition: all 1s; | |
| } | |
| /*---Анимация при наведении конец---*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment