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

(Created page with "<html> <head> <style> #box1:hover, #box2:hover, #box3:hover, #box4:hover, #box5:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale...")
 
 
(56 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<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;
 +
    filter: alpha(opacity=25);
 +
    -moz-opacity:0.25;
 
}
 
}
  
−
#bgimage {
+
.transparent_link_box:before {
−
    position: absolute;
+
     content: "";
−
    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 {
+
−
     border: 2px solid red;
+
 
}
 
}
 
</style>
 
</style>
−
</head>
 
−
 
−
<body>
 
−
    <div id="hoverimg" class="border">
 
−
        <div id="bgimage" class="border"></div>
 
−
        <div id="link_layer" class="border">
 
−
            <div class="transparent_link_box border" id="box1"></div>
 
−
        </div>
 
−
    </div>
 
−
</body>
 
−
 
 
</html>
 
</html>

Latest revision as of 21:17, 1 November 2017