How to popup content in relative to a div
Question
I am trying to make a grid of multiple divs. I want to popup some content in any other div. But this popup content should be exactly over the div that is being hovered. It should be dynamic for each div.
I found an example here . Please help me implement such a system.
2 answers
solution1
0 2018-08-20 14:00:13
Since you didn't specify how you want it to happen I'd advise using jQuery UI.
You might find some examples using the Tooltip here: jQuery UI Tooltip Example
If you want something to happen at every other element you might want to take a look at the :odd -Selector of jQuery: jQuery :odd Selector Reference
Your grid could be created using css-grid-propertys. You can find a guide here: grid-guide by CSS-Tricks
If you have more specific questions you might want to ask them in a more specific way.
solution2
0 ACCPTED 2018-08-20 14:04:29
you can you position relative and absolute property to overlay div just over any particular div.
please note parent div should be relative and child/overlay div should be absolute.
have a look below example.
*{box-sizing:border-box;} .div{ width:300px; height:500px; float:left; margin:10px; padding:10px; position:relative; color:#000; border:1px solid #ccc; } .div h1{ margin:0; padding:0; font-size:17px; } .overlay-div{ position:absolute; top:0; left:0; padding:10px; width:100%; height:100%; background:rgba(0,0,0,0.8); color:#fff; opacity:0; visibility:hidden; -webkit-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .div:hover .overlay-div{ opacity:1; visibility:visible; }
<html> <head> <title>overlay inside div</title> </head> <body> <div class="div"> <h1>div content will be here</h1> <div class="overlay-div">Overlay Content will be here</div> </div> <div class="div"> <h1>div content will be here</h1> <div class="overlay-div">Overlay Content will be here</div> </div> <div class="div"> <h1>div content will be here</h1> <div class="overlay-div">Overlay Content will be here</div> </div> <div class="div"> <h1>div content will be here</h1> <div class="overlay-div">Overlay Content will be here</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.