Hover boxes

Another sample I saw showed hovering over a box to reveal some text. Using the image alone is not going to invite people to hover, so some additional hook is needed.

Learn more about this

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Core Layout

While this is relatively easy to build in Bricks, I wasn’t sure how well it would work in core. It was as easy as I had hoped, just without the visual representation within the builder. Note: If you add the CSS to the global CSS, it will appear correctly in the block editor.

The CSS

This is another easy effect to create once you know how. You place the text layer over top using absolute positioning, but its opacity is 0 until the user hovers over the box. If you have a focusable element inside, you could also add focus CSS (preferred). The same CSS can be used inside Bricks.

.hover-box{
  position: relative;
  display: grid;
  align-items: center;
}
.hover-box__img{
  display: grid;
  align-items: center;
  padding: 1.5em;
}
.hover-box__text{
  position:absolute;
  display: grid;
  align-items: center;
  inset:0;
  background-color: gold;
  opacity: 0;
  transition: opacity 400ms;
  padding: 1.5em;
}
.hover-box:hover .hover-box__text{
  opacity:1;
}