pure css or is JS also a possibility? Both can do the job. You will need to create a wrapper (this can be a div), to which you add the hover effect, then within the wrapper make the button, and a table with the 4 buttons you wish to have.
Right, so in the above code. I have created an extremely basic hover-animated div tag where as displayed in the code, the div container will expand to the right by 30%. I have also added a table so now how can I proceed with so that it only appears after hovering over the container? Please forget about the button inside the div container as I am interested with that anymore.
Thank you for the code suggestion by the way but since I am quite new with this, I cannot seem to visualize how I can proceed with this.
which we give to the table css selector, then create a new css selector which can manipulate the table while we hover the div, see if you can figure this out. If not, let me know
in this newly created css selector, we could display the table
I have managed to get the outcome (please see the updated code above) where I have simply added two ids for the div and the table itself. I have got what I was after and I am happy with this but I want to give it some animation delay when the div container expands so that there is some smooth transition?
Thank you for the information; I am still experimenting with my CSS code to see what I come up with. In terms of transitions however, I have not succeeded unfortunately as I am unable to work out what it is that I need to change?
After observing the code and making changes here and there, I was clever enough to discover that the real problem was how to get the animation from the display: none; to display: block; working? And I found out that it is seemingly quite tricky and not that straightforward with CSS.
I am still trying so I’ll see what I can do about this.