Difference between revisions of "Team:RHIT/test"

Line 208: Line 208:
 
         /********************************* CONTENT OF THE PAGE ********************************/
 
         /********************************* CONTENT OF THE PAGE ********************************/
  
 +
ul.img-list {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-align: center;
 +
     
 +
}
  
 +
ul.img-list li {
 +
  display: inline-block;
 +
  height: 150px;
 +
  margin: 0 0 5px 0;
 +
  border: solid 2px;
 +
  position: relative;
 +
  width: 150px;
 +
  width: calc(33% - 6px);
 +
}
 +
 +
ul.img-list img {
 +
  width: 100%;
 +
  height: 100%
 +
}
 +
 +
ul.img-home {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-align: center;
 +
  width: 950px
 +
     
 +
}
 +
 +
ul.img-home li {
 +
  display: inline-block;
 +
  margin: 5px 0 0 0;
 +
  border: 0px;
 +
  position: relative
 +
}
 +
 +
ul.img-home img {
 +
  width: 100%;
 +
  height: 100%
 +
}
 +
 +
ul.header a {
 +
  color: white;
 +
}
 +
 +
ul.header a:hover {
 +
  color: black;
 +
}
 +
 +
span.text-content {
 +
  background: rgba(255,255,255,0.7);
 +
  color: black;
 +
  font-size: 16px;
 +
  cursor: pointer;
 +
  display: table;
 +
  height: 100%;
 +
  left: 0;
 +
  position: absolute;
 +
  vertical-align: middle;
 +
  top: 0;
 +
  width: 100%;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 500ms;
 +
  -moz-transition: opacity 500ms;
 +
  -o-transition: opacity 500ms;
 +
  transition: opacity 500ms;
 +
}   
 +
span.text-content span {
 +
  display: table-cell;
 +
  text-align: center;
 +
  vertical-align: middle;
 +
}
 +
ul.img-list li:hover span.text-content {
 +
  opacity: 1;
 +
}
 +
ul.img-home li:hover span.text-content {
 +
  opacity: 1;
 +
}
 
/*STYLING */
 
/*STYLING */
  

Revision as of 14:34, 13 June 2018

Hi Just trying to make the page a lil longer cool thanks