Line 38: | Line 38: | ||
} | } | ||
+ | |||
+ | .front-tiles .overlay { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | /*padding: 3em;*/ | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .front-tiles .overlay:before { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | /*top: 20px; | ||
+ | right: 20px; | ||
+ | bottom: 20px; | ||
+ | left: 20px; removed gives an area that do not get background upon hovering*/ | ||
+ | /*border: 1px solid #fff;*/ | ||
+ | content: ''; | ||
+ | opacity: 0; /*make the object completely transparant*/ | ||
+ | background-color: rgba(0,0,0,0.5); | ||
+ | filter: alpha(opacity=0); | ||
+ | -webkit-transition:all .2s ease-in-out; | ||
+ | transition:all .2s ease-in-out | ||
+ | /*-webkit-transition: opacity 0.35s, -webkit-transform 0.45s; | ||
+ | transition: opacity 0.35s, transform 0.45s; | ||
+ | -webkit-transform: translate3d(-20px,0,0); | ||
+ | transform: translate3d(-20px,0,0);*/ | ||
+ | } | ||
+ | |||
+ | .front-tiles:hover .overlay:before, | ||
+ | .front-tiles:hover a, | ||
+ | .front-tiles:hover p, | ||
+ | .front-tiles:focus .overlay:before, | ||
+ | .front-tiles:focus a, | ||
+ | .front-tiles:focus p { | ||
+ | opacity:1; | ||
+ | filter:alpha(opacity=100); | ||
+ | -ms-transform:translatey(0); | ||
+ | -webkit-transform:translatey(0); | ||
+ | transform:translatey(0); | ||
+ | } | ||
+ | .front-tiles .overlay { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | position:absolute; | ||
+ | overflow:hidden; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | opacity:0; | ||
+ | background-color:rgba(0,0,0,0.5); | ||
+ | -webkit-transition:all .2s ease-in-out; | ||
+ | transition:all .2s ease-in-out | ||
+ | } | ||
+ | .front-tiles:hover .overlay, | ||
+ | .front-tiles:focus .overlay { | ||
+ | opacity:1; | ||
+ | filter:alpha(opacity=100); | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
Line 89: | Line 151: | ||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--Project tile--> | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--Project tile--> | ||
<div class="space"> | <div class="space"> | ||
− | <a | + | <a href="https://2016.igem.org/Team:DTU-Denmark/project"> |
<img class="img-responsive" src="https://static.igem.org/mediawiki/2016/9/9d/T--DTU-Denmark--solution_sq.jpg"> | <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/9/9d/T--DTU-Denmark--solution_sq.jpg"> | ||
Revision as of 00:11, 20 October 2016