I have and unordered list with each item in a box/div, I want to popup a large box/div with an image and Extra details about the list item. I want to make it popup in a manner where it will be centered in X & Y direction to the list item box.
I tried it with a position absolute, but it is not aligning properly as I needed and some of it crops out of the page. I also want it responsive. How do I position it correctly?
This is what I tried:
.skills {
height:200px;
list-style: none;
list-style-position: inside;
margin:auto;
display: flex;
align-items:center;
justify-content:center;
}
.skills li {
border: 2px solid black;
list-style-position: inside;
margin: .8rem;
border-radius: .9rem;
padding: .5rem;
font-weight: bold;
display: inline-flex;
}
.skill-detail {
position: absolute;
display: none;
width: 20rem;
height: 20rem;
border-radius: 30px;
background-color: lightcyan;
box-shadow: 5px 5px 10px;
}
li:hover .skill-detail {
display: flex;
align-items: center;
justify-content: center;
}<ul class="skills">
<li>
<div class="skill-detail">CSS gives design, colors and styles to a webpage.</div>
CSS
</li>
<li>
<div class="skill-detail">Bootstrap is a CSS framework used for making responsive websites.
</div>
Bootstrap
</li>
<ul>I want the popup to be centered to the list item box. Also want to adjust automatically on small devices.