How to create a pop-up box with two columns when hovering over a link?-CodePudding

Hey guys : ) I am creating a website and I would like to create a pop-up box of determined size that would display two columns when hovering over a link. In the left column an image and in the right column a text with a link. How do I do it using preferebly CSS?

Thank you!

CodePudding user response：

You can do it using onmouseover and onmouseout

.popUp {
  display: none;
}

<a href="#" onm ouseover="document.getElementById('popUp').style.display='block'" onm ouseout="document.getElementById('popUp').style.display='none'">Something
</a>
<div  id="popUp">Hello</div>

CodePudding user response：

.container{
  display: flex;
  flex-direction: column;
  position: relative;
}
p:hover ~ .popup{
  visibility:visible;
  opacity:1;
}
.popup{
  visibility:hidden;
  opacity:0;
  position: absolute;
  top: 40px;
  display: flex;
  flex-direction: row;
  width:150px;
  height:50px;
  transition: all .3s;
}
.first-element{
  height: 100%;
  flex-basis: 50%;
  border:1px solid red;
}
.second-element{
  border:1px solid green;
  height: 100%;
  flex-basis: 50%;
}

<div >
  <p>show pop up</p>
  <div class='popup'>
  <div class='first-element'>image element</div>
  <div class='second-element'>link elements</div>
  </div>
</div>