|
|
Line 30: |
Line 30: |
| } | | } |
| | | |
− | .front-tiles img:hover, | + | .space a:hover, |
− | .front-tiles img:focus { | + | .space a:focus { |
| cursor: pointer; | | cursor: pointer; |
| } | | } |
Line 37: |
Line 37: |
| margin-bottom: 2em; | | margin-bottom: 2em; |
| } | | } |
− |
| |
− |
| |
− | .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 151: |
Line 88: |
| <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 href="https://2016.igem.org/Team:DTU-Denmark/project"> | + | <a class="hovereffect" onclick="void(0)" 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"> |
| | | |