Difference between revisions of "Template:Heidelberg/SandboxMarita/hoverimages"

 
(54 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{#tag:html|
+
<html>
−
 
+
−
<head>
+
 
<style>
 
<style>
−
#box1:hover, #box2:hover, #box3:hover, #box4:hover, #box5:hover {
+
#hoverimg {
−
     -moz-transform: scale(1.1);
+
     position: relative;
−
     -webkit-transform: scale(1.1);
+
     align-items: center;
−
     transform: scale(1.1);  
+
    height:100%;
−
     transition: all 1s ease;
+
    width: 1150px;
 +
     margin: 0 0 0 0 !important;
 +
     padding: 0 0 0 0 !important;
 
}
 
}
  
−
#box1 {
+
#bgimage {
−
     position: absolute;
+
     z-index: 0;
−
     left: 210px;
+
     margin: 0 0 0 0;
−
     bottom: 215px;
+
     padding: 0 0 0 0;
−
     width: 120px;
+
     width: 100%;
 +
    height: auto;
 
}
 
}
  
−
#box2 {
+
#link_layer:before {
−
     position: absolute;
+
     content: "\200B";
−
    left: 302px;
+
−
    bottom: 127px;
+
−
    width: 130px;
+
−
    float: left;
+
 
}
 
}
  
−
#box3 {
+
#link_layer {
 
     position: absolute;
 
     position: absolute;
−
     left: 500px;
+
     top: 0;
−
     bottom: 150px;
+
     width: 100%;
−
     width: 160px;
+
     height: 100%;
 +
    z-index: 1;
 
}
 
}
  
−
#box4 {
+
.transparent_link_box {
 
     position: absolute;
 
     position: absolute;
−
     right: 350px;
+
     opacity: 0.15;
−
     bottom: 120px;  
+
     filter: alpha(opacity=15);
−
     width: 130px;
+
     -moz-opacity:0.15;
−
}
+
    background-color: black;
 +
    z-index: 2;
  
−
#box5 {
+
     -moz-transform: scale(1.0);
−
     position: absolute;
+
     -webkit-transform: scale(1.0);
−
     right: 260px;
+
     transform: scale(1.0);  
−
     bottom: 230px;
+
     transition: all 0.7s ease-in;
−
     width: 110px;
+
 
}
 
}
  
−
#hoverimg {
+
.transparent_link_box:hover {
−
    width: 100px;
+
     -moz-transform: scale(1.05);
−
    height: 100px;
+
     -webkit-transform: scale(1.05);
−
    overflow-x: auto;
+
     transform: scale(1.05);  
−
}
+
     transition: all 0.7s ease-out;
−
 
+
     opacity: 0.25;
−
#bgimage {
+
     filter: alpha(opacity=25);
−
     position: absolute;
+
     -moz-opacity:0.25;
−
    top: 0px;
+
−
    left: 0px;
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
     background-size: 100px 100px;
+
−
    background-image: url(https://static.igem.org/mediawiki/2017/a/ae/T--Heidelberg--2017_Background_Tiger.jpg);
+
−
     display: block;
+
−
     z-index: 99;
+
−
}
+
−
 
+
−
#link_layer {
+
−
    position: absolute;
+
−
    top: 0px;
+
−
    left: 0px;
+
−
    display:block;
+
−
    background:transparent;
+
−
    position: absolute;
+
−
    bottom: 100px;
+
−
    right: 10px;
+
−
    z-index: 100;
+
−
}
+
−
 
+
−
.transparent_link_box {
+
−
     opacity: 0.5;
+
−
     filter: alpha(opacity=50);
+
−
     -moz-opacity:0.5;
+
 
}
 
}
  
−
.border {
+
.transparent_link_box:before {
−
     border: 2px solid red;
+
     content: "";
 
}
 
}
 
</style>
 
</style>
−
</head>
+
</html>
−
}}
+

Latest revision as of 21:17, 1 November 2017