CLOSED: [2024-03-04 Mon 07:28]
:PROPERTIES:
:ID:       D4353066-D5B5-4A4F-B20E-1C7BBD43B12A
:CREATED:  [2024-03-04 Mon 07:28]
:END:
:LOGBOOK:
- State "DONE"       from              [2024-03-04 Mon 07:28]
:END:
For my children, I often devise some "mystery questions" they need to resolve and I want to put those together on a page of this blog (it will be in French, sorry). Now I was looking for how to indicate the solution for the mysteries without it being revealed automatically. Here is an example:

- I speak without a mouth and hear without ears. I have no body, but I come alive with the wind. What am I?

#+BEGIN_EXPORT html
<span class="HideBox">(oɥɔǝ uɐ)</span><span style="float: right;">The solution&nbsp;->&nbsp;</span><br>
#+END_EXPORT

** CSS implementation
I implemented this using the site CSS style sheet by adding a ~.HideBox~ definition:

#+BEGIN_SRC
.HideBox {
  color: #cae596;
  background-color: #cae596;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
  display: inline-block; /* Ensure background color covers only the width of the text */
  padding: 1px; /* Add padding for spacing */
  float: right; /* Align text to the right */
}

.HideBox:hover {
  color: #c8b48c;
  background-color: #2a2d3d;
}
#+END_SRC

I can then in a given blog post add this snippet to insert the solution:

#+BEGIN_SRC
#+BEGIN_EXPORT html
<span class="HideBox">(oɥɔǝ uɐ)</span><span style="float: right;">The solution&nbsp;->&nbsp;</span><br>
#+END_EXPORT
#+END_SRC