Advertisement
Guest User

Untitled

a guest
Nov 23rd, 2017
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.31 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.         .title {
  7.             background-color: #1a1a1a;
  8.             color: #727272;
  9.             height: 32px;
  10.             line-height: 32px;
  11.             padding-left: 8px;
  12.             /*width: 129px;*/
  13.             font-size: 7pt;
  14.             font-family: Arial;
  15.         }
  16.  
  17.         /*Added - start*/
  18.         /*-----------------------------------------------*/
  19.         .title:hover {
  20.             background-color: #B9A65E;
  21.             color: #ffffff;
  22.             cursor: pointer;
  23.         }
  24.  
  25.         .title:hover > .categorie {
  26.             background-color: #B9A65E;
  27.             color: #B9A65E;
  28.         }
  29.         /*Added finish*/
  30.         /*-----------------------------------------------*/
  31.  
  32.         /* !!!DELETED*/
  33.         /*.title:hover {*/
  34.             /*position:absolute;*/
  35.             /*bottom:0;*/
  36.             /*left:0;*/
  37.             /*right:0;*/
  38.         /*}*/
  39.  
  40.         .categorie {
  41.             background-color: #333333;
  42.             color: #aeaeae;
  43.             height: 32px;
  44.             margin-left: 129px;
  45.             margin-top: -32px;
  46.             padding-left: 13px;
  47.             /*width: 74px;*/
  48.             font-size: 7pt;
  49.             font-family: Arial;
  50.         }
  51.  
  52.         .project {
  53.             margin-right: 10px;
  54.             /*float: left;*/
  55.             display: inline-block;
  56.         }
  57.  
  58.         .project img {
  59.             filter: grayscale(100%);
  60.             -webkit-filter: grayscale(100%);
  61.             transition: filter 600ms ease;
  62.             -webkit-transition: -webfilter 600ms ease;
  63.         }
  64.  
  65.         /* !!!DELETED*/
  66.         /*.project img:hover {*/
  67.             /*filter: grayscale(0);*/
  68.             /*-webkit-filter: grayscale(0);*/
  69.         /*}*/
  70.     </style>
  71. </head>
  72. <body>
  73. <div class="content">
  74.  
  75.     <div class="project">
  76.         <img src="images/project.png">
  77.         <div class="title">Pocahontas
  78.             <div class="categorie">/ DESIGN</div>
  79.         </div>
  80.     </div>
  81.  
  82.     <div class="project">
  83.         <img src="images/project.png">
  84.         <div class="title">Title Here
  85.             <div class="categorie">/ DESIGN</div>
  86.         </div>
  87.     </div>
  88.  
  89.     <div class="project">
  90.         <img src="images/project.png">
  91.         <div class="title">Title Here
  92.             <div class="categorie">/ DESIGN</div>
  93.         </div>
  94.     </div>
  95.  
  96.     <div class="project">
  97.         <img src="images/project.png">
  98.         <div class="title">Title Here
  99.             <div class="categorie">/ DESIGN</div>
  100.         </div>
  101.     </div>
  102.  
  103.     <div class="project">
  104.         <img src="images/project.png">
  105.         <div class="title">Title Here
  106.             <div class="categorie">/ DESIGN</div>
  107.         </div>
  108.     </div>
  109.  
  110.     <div class="project">
  111.         <img src="images/project.png">
  112.         <div class="title">Title Here
  113.             <div class="categorie">/ DESIGN</div>
  114.         </div>
  115.     </div>
  116.  
  117.     <div class="project">
  118.         <img src="images/project.png">
  119.         <div class="title">Title Here
  120.             <div class="categorie">/ DESIGN</div>
  121.         </div>
  122.     </div>
  123.  
  124.     <div class="project">
  125.         <img src="images/project.png">
  126.         <div class="title">Title Here
  127.             <div class="categorie">/ DESIGN</div>
  128.         </div>
  129.     </div>
  130. </div>
  131. </body>
  132. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement