<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
<div class="center">
<p>Hover Over the Image</p>
<svg id="MonValley" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 300 300.001" enable-background="new 0 0 300 300.001" xml:space="preserve">
<g id="Background">
<path d="M300,275.612c0,13.506-10.949,24.456-24.455,24.456H24.455C10.949,300.068,0,289.118,0,275.612V24.523
C0,11.017,10.949,0.067,24.455,0.067h251.089C289.05,0.067,300,11.017,300,24.523V275.612z" />
<polygon fill="#213C45" points="180.745,294.673 189.226,299.762 216.677,299.762 216.677,103.068 180.745,124.628 " />
<path fill="#566560" d="M216.677,299.762h7.176c10.18,0,19.885-2.016,28.759-5.646V124.628l-35.935-21.56V299.762z" />
<polygon fill="#738A91" points="216.677,103.068 180.745,124.628 216.677,146.188 252.612,124.628 " />
<polygon fill="#5E7887" points="216.677,110.83 193.681,124.628 216.677,138.426 239.675,124.628 " />
<polygon fill="#738A91" points="216.677,117.563 204.904,124.628 216.677,131.692 228.453,124.628 " />
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="150" y1="255.5474" x2="150" y2="-2.5565">
<stop offset="0.0859" style="stop-color:#000000" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_13_)" d="M0,52.931v222.681c0,12.192,8.925,22.3,20.598,24.15h258.805
c11.673-1.851,20.598-11.958,20.598-24.15V52.931H0z" />
<path fill="#213C45" d="M52.325,295.804c7.606,2.554,15.739,3.958,24.205,3.958h20.712V62.351l-44.917,26.95V295.804z" />
<polygon fill="#566560" points="97.242,299.762 142.159,299.762 142.159,89.301 97.242,62.351 " />
<polygon fill="#738A91" points="97.242,62.351 52.325,89.301 97.242,116.251 142.159,89.301 " />
<polygon fill="#5E7887" points="97.242,72.053 68.495,89.301 97.242,106.549 125.989,89.301 " />
<polygon fill="#738A91" points="97.242,80.47 82.524,89.301 97.242,98.131 111.96,89.301 " />
<polygon fill="#213C45" points="56.816,76.723 52.325,79.418 52.325,89.348 56.816,92.043 " />
<polygon fill="#566560" points="56.816,76.723 61.308,79.418 61.308,89.348 56.816,92.043 " />
<polygon fill="#738A91" points="56.816,76.723 52.325,79.418 56.816,82.113 61.308,79.418 " />
<polygon fill="#213C45" points="76.515,88.491 72.023,91.187 72.023,101.116 76.515,103.812 " />
<polygon fill="#566560" points="76.515,88.491 81.007,91.187 81.007,101.116 76.515,103.812 " />
<polygon fill="#738A91" points="76.515,88.491 72.023,91.187 76.515,93.882 81.007,91.187 " />
<polygon fill="#213C45" points="97.242,100.931 92.75,103.626 92.75,113.556 97.242,116.251 " />
<polygon fill="#566560" points="97.242,100.931 101.734,103.626 101.734,113.556 97.242,116.251 " />
<polygon fill="#213C45" points="116.941,64.057 112.449,66.752 112.449,76.682 116.941,79.377 " />
<polygon fill="#566560" points="116.941,64.057 121.433,66.752 121.433,76.682 116.941,79.377 " />
<polygon fill="#738A91" points="116.941,64.057 112.449,66.752 116.941,69.448 121.433,66.752 " />
<polygon fill="#738A91" points="97.242,100.931 92.75,103.626 97.242,106.321 101.734,103.626 " />
<polygon fill="#213C45" points="97.242,52.931 92.75,55.626 92.75,65.556 97.242,68.251 " />
<polygon fill="#566560" points="97.242,52.931 101.734,55.626 101.734,65.556 97.242,68.251 " />
<polygon fill="#738A91" points="97.242,52.931 92.75,55.626 97.242,58.321 101.734,55.626 " />
<polygon fill="#213C45" points="137.667,76.723 133.175,79.418 133.175,89.348 137.667,92.043 " />
<polygon fill="#566560" points="137.667,76.723 142.159,79.418 142.159,89.348 137.667,92.043 " />
<polygon fill="#738A91" points="137.667,76.723 133.175,79.418 137.667,82.113 142.159,79.418 " />
<path d="M120.976,122.937c-6.108,3.443-11.06,11.185-11.06,17.293v31.949l22.119-13.164v-31.253
C132.035,121.654,127.084,119.494,120.976,122.937z" />
<path fill="#213C45" d="M124.009,121.659c2.181,0.79,3.555,2.896,3.555,6.104v33.914l4.471-2.661v-31.253
C132.035,122.707,128.641,120.368,124.009,121.659z" />
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="101.7681" y1="146.3892" x2="114.3482" y2="158.9693">
<stop offset="0" style="stop-color:#000000" />
<stop offset="1" style="stop-color:#213C45" />
</linearGradient>
<polygon fill="url(#SVGID_14_)" points="109.916,172.179 132.035,159.015 132.035,159.015 109.916,147.739 " />
</g>
<g id="Step1">
<polygon fill="#213C45" points="133.888,157.904 106.938,174.074 106.938,301.608 133.888,317.777 " />
<polygon fill="#566560" points="114.089,178.202 141.04,162.032 141.04,301.608 114.089,317.777 " />
<polygon fill="#738A91" points="133.888,157.904 106.938,174.074 114.063,178.202 141.013,162.032 " />
</g>
<g id="Step2">
<polygon fill="#213C45" points="141.04,168.053 114.089,184.223 114.089,311.757 141.04,327.926 " />
<polygon fill="#566560" points="121.241,188.351 148.191,172.181 148.191,311.757 121.241,327.926 " />
<polygon fill="#738A91" points="141.04,168.053 114.089,184.223 121.214,188.351 148.165,172.181 " />
</g>
<g id="Step3">
<polygon fill="#213C45" points="148.191,178.203 121.241,194.373 121.241,321.907 148.191,338.076 " />
<polygon fill="#566560" points="128.392,198.5 155.342,182.331 155.342,321.907 128.392,338.076 " />
<polygon fill="#738A91" points="148.191,178.203 121.241,194.373 128.366,198.5 155.316,182.331 " />
</g>
<g id="Step4">
<polygon fill="#213C45" points="155.342,188.352 128.392,204.522 128.392,332.056 155.342,348.225 " />
<polygon fill="#566560" points="135.543,208.65 162.494,192.48 162.494,332.056 135.543,348.225 " />
<polygon fill="#738A91" points="155.342,188.352 128.392,204.522 135.517,208.65 162.467,192.48 " />
</g>
<g id="Step5">
<polygon fill="#213C45" points="162.494,198.501 135.543,214.671 135.543,342.206 162.494,358.375 " />
<polygon fill="#566560" points="142.695,218.799 169.645,202.629 169.645,342.206 142.695,358.375 " />
<polygon fill="#738A91" points="162.494,198.501 135.543,214.671 142.668,218.799 169.619,202.629 " />
</g>
<g id="Step6">
<polygon fill="#213C45" points="169.645,208.651 142.695,224.821 142.695,352.355 169.645,368.524 " />
<polygon fill="#566560" points="149.846,228.949 176.796,212.779 176.796,352.355 149.846,368.524 " />
<polygon fill="#738A91" points="169.645,208.651 142.695,224.821 149.82,228.949 176.77,212.779 " />
</g>
<g id="Step7">
<polygon fill="#213C45" points="176.796,218.8 149.846,234.97 149.846,362.504 176.796,378.673 " />
<polygon fill="#566560" points="156.998,239.098 183.948,222.928 183.948,362.504 156.998,378.673 " />
<polygon fill="#738A91" points="176.796,218.8 149.846,234.97 156.971,239.098 183.921,222.928 " />
</g>
<g id="Step8">
<polygon fill="#213C45" points="183.948,228.95 156.998,245.12 156.998,372.654 183.948,388.823 " />
<polygon fill="#566560" points="164.149,249.248 191.099,233.078 191.099,372.654 164.149,388.823 " />
<polygon fill="#738A91" points="183.948,228.95 156.998,245.12 164.123,249.248 191.073,233.078 " />
</g>
<g id="Step9">
<polygon fill="#213C45" points="191.099,239.099 164.149,255.269 164.149,382.803 191.099,398.972 " />
<polygon fill="#566560" points="171.3,259.397 198.25,243.227 198.25,382.803 171.3,398.972 " />
<polygon fill="#738A91" points="191.099,239.099 164.149,255.269 171.274,259.397 198.224,243.227 " />
</g>
<g id="Step10">
<polygon fill="#213C45" points="198.25,249.249 171.3,265.418 171.3,392.953 198.25,409.122 " />
<polygon fill="#566560" points="178.452,269.546 205.402,253.376 205.402,392.953 178.452,409.122 " />
<polygon fill="#738A91" points="198.25,249.249 171.3,265.418 178.425,269.546 205.375,253.376 " />
</g>
<g id="Step11">
<polygon fill="#213C45" points="205.402,259.398 178.452,275.568 178.452,403.102 205.402,419.271 " />
<polygon fill="#566560" points="185.603,279.696 212.553,263.526 212.553,403.102 185.603,419.271 " />
<polygon fill="#738A91" points="205.402,259.398 178.452,275.568 185.577,279.696 212.527,263.526 " />
</g>
<g id="Step12">
<polygon fill="#213C45" points="212.553,269.547 185.603,285.717 185.603,413.251 212.553,429.42 " />
<polygon fill="#566560" points="192.754,289.845 219.705,273.675 219.705,413.251 192.754,429.42 " />
<polygon fill="#738A91" points="212.553,269.547 185.603,285.717 192.728,289.845 219.678,273.675 " />
</g>
<g id="Step13">
<polygon fill="#213C45" points="219.705,279.697 192.754,295.867 192.754,423.401 219.705,439.57 " />
<polygon fill="#566560" points="199.906,299.995 226.856,283.825 226.856,423.401 199.906,439.57 " />
<polygon fill="#738A91" points="219.705,279.697 192.754,295.867 199.879,299.995 226.83,283.825 " />
</g>
<g id="DarkFade">
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="150" y1="319.3403" x2="150" y2="189.902">
<stop offset="0.0859" style="stop-color:#000000" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_15_)" d="M0,188.362v87.25c0,12.192,8.925,22.3,20.598,24.15h258.805
c11.673-1.851,20.598-11.958,20.598-24.15v-87.25H0z" />
</g>
<g id="BrightDoor">
<path fill="#C2DE9B" d="M120.976,122.937c-6.108,3.443-11.06,11.185-11.06,17.293v31.949l22.119-13.164v-31.253
C132.035,121.654,127.083,119.494,120.976,122.937z" />
<path fill="#738A91" d="M124.009,121.659c2.182,0.79,3.555,2.896,3.555,6.104v33.914l4.471-2.661v-31.253
C132.035,122.707,128.64,120.368,124.009,121.659z" />
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="101.7686" y1="146.3906" x2="136.0163" y2="180.6384">
<stop offset="0" style="stop-color:#FFFCDF" />
<stop offset="1" style="stop-color:#213C45" />
</linearGradient>
<polygon fill="url(#SVGID_16_)" points="109.916,172.179 132.035,159.015 132.035,159.015 109.916,147.739 " />
</g>
</svg>
<div class="black-block"></div>
</div>body {
background-color: #000;
}
p {
font-family: "Poppins", sans-serif;
color: #748b91;
font-size: 17px;
}
.center {
text-align: center;
}
#MonValley #BrightDoor {
transition: all 0.3s ease-in-out;
opacity: 0;
}
#MonValley:hover #BrightDoor {
opacity: 1;
}
#MonValley #Step1 {
transition: all 0.65s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step1 {
transform: translate(0px, 0px);
}
#MonValley #Step2 {
transition: all 0.6s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step2 {
transform: translate(0px, 0px);
}
#MonValley #Step3 {
transition: all 0.55s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step3 {
transform: translate(0px, 0px);
}
#MonValley #Step4 {
transition: all 0.5s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step4 {
transform: translate(0px, 0px);
}
#MonValley #Step5 {
transition: all 0.45s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step5 {
transform: translate(0px, 0px);
}
#MonValley #Step6 {
transition: all 0.4s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step6 {
transform: translate(0px, 0px);
}
#MonValley #Step7 {
transition: all 0.35s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step7 {
transform: translate(0px, 0px);
}
#MonValley #Step8 {
transition: all 0.3s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step8 {
transform: translate(0px, 0px);
}
#MonValley #Step9 {
transition: all 0.25s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step9 {
transform: translate(0px, 0px);
}
#MonValley #Step10 {
transition: all 0.2s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step10 {
transform: translate(0px, 0px);
}
#MonValley #Step11 {
transition: all 0.15s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step11 {
transform: translate(0px, 0px);
}
#MonValley #Step12 {
transition: all 0.1s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step12 {
transform: translate(0px, 0px);
}
#MonValley #Step13 {
transition: all 0.05s ease-in-out;
transform: translate(0px, 150px);
}
#MonValley:hover #Step13 {
transform: translate(0px, 0px);
}
.black-block {
background-color: black;
margin-top: -5px;
min-height: 5px;
z-index: 10;
position: relative;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.