Post Title at a Different Location on Image Hover

This Pro tutorial provides the steps to update the text of a sticky div with the title of the post that is hovered on the Posts page in Bricks.

Step 1

Create a Page named say, “Blog” and set it as the Posts page at Settings → Reading.

Edit it with Bricks.

Copy this JSON of the Section and paste.

Step 2

Click on Settings (gear icon) near the top left → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts:

<script>
document.addEventListener("DOMContentLoaded", () => {
  // store the text of #post-title-holder
  let postTitleHolderText =
    document.querySelector("#post-title-holder").innerText

  // loop through each .blog-post
  document.querySelectorAll(".blog-post").forEach((post) => {
    // when the post is hovered, set the value of its data-title attribute as the text of #post-title-holder
    post.addEventListener("mouseover", () => {
      document.querySelector("#post-title-holder").innerText =
        post.getAttribute("data-title")
    })

    // when the post is no longer hovered, set the text of #post-title-holder to whatever was there before
    post.addEventListener("mouseout", () => {
      document.querySelector("#post-title-holder").innerText =
        postTitleHolderText
    })
  })
})
</script>