-1

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!

lukas
  • 1
  • 2

2 Answers2

0

You can do it using onmouseover and onmouseout

.popUp {
  display: none;
}
<a href="#" onmouseover="document.getElementById('popUp').style.display='block'" onmouseout="document.getElementById('popUp').style.display='none'">Something
</a>
<div class="popUp" id="popUp">Hello</div>
Archit Gargi
  • 634
  • 1
  • 8
  • 24
0

.container{
  position: relative;
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
.container: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 class="container">
  <span>show pop up</span>
  <div class='popup'>
  <div class='first-element'>image element</div>
  <div class='second-element'><a href="#" >link elements</a></div>
  </div>
</div>
Ahmad MRF
  • 1,346
  • 1
  • 6
  • 16
  • Thank you for your answer, looks exactly how I had it in mind! The only thing is, that it is impossible to click on the text in the second element. It disappears again before the mouse hits the text. The second element is supposed to be a link. Do you have any idea how to fix this please? – lukas Mar 11 '22 at 19:01