https://i.sstatic.net/DMU5s.jpg
The elements E1, E2, E3, E4 are all part of the user interface (UI) and are intended to have a hover effect. Additionally, there is a background image included in the design.
Currently, this is the progress made on the project:
<div class="bg">
<img src="bg.jpg" id="bg_id">
<div class="ui">
<img id="ui-elem1" src="ui-elem1.png">
</div>
</div>
In the CSS section, the following styles have been set:
body {
overflow: hidden;
margin: 0 ;
}
.bg {
position: relative;
width: 100vw;
height: 100vh;
}
#bg_id {
position: absolute;
width: 100%;
height: 100%;
}
.ui {
position: relative;
width: 50vw;
left: 10vw;
top: 75vw;
}
/* 20% of ui */
/* 20% width 4 images = 4*20 = 80% padding = 6.6% */
#ui-elem1 {
position: absolute;
width: 20%;
height: 100%;
padding: 6.6%;
}
While the background image functions as intended - resizing proportionally with the viewport, there seems to be an issue with displaying the first UI element. Any suggestions on how to troubleshoot this problem?
Thank you.
UPDATE: A live demo is available for reference at https://jsfiddle.net/vq24a76p/1/. However, the proportional display to the viewport is not accurate.