{"id":115,"date":"2025-12-08T20:39:01","date_gmt":"2025-12-08T20:39:01","guid":{"rendered":"https:\/\/anacuamic.com\/?page_id=115"},"modified":"2025-12-10T20:26:25","modified_gmt":"2025-12-10T20:26:25","slug":"2020-2","status":"publish","type":"page","link":"https:\/\/anacuamic.com\/index.php\/2020-2\/","title":{"rendered":"2020"},"content":{"rendered":"\n<style>\n\/* Container *\/\n.overlap-gallery {\n  position: relative;\n  width: 90%;\n  max-width: 900px;\n  height: 520px;\n  margin: 0 auto;\n  overflow: visible;\n}\n\n\/* Floating + fade-in animation *\/\n@keyframes float {\n  0% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n  100% { transform: translateY(0px); }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\/* Circle visuals *\/\n.overlap-item {\n  position: absolute;\n  width: 26%; \/* slightly reduced to fit 7 items *\/\n  max-width: 220px;\n  opacity: 0;\n  animation: fadeIn 1.8s ease forwards, float 7s ease-in-out infinite;\n  animation-delay: 0.3s;\n  cursor: pointer;\n  border-radius: 50%;\n  overflow: hidden;\n  transition: transform 1.6s ease, opacity 0.8s ease;\n}\n\n.overlap-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  border-radius: 50%;\n}\n\n\/* Hover label *\/\n.overlap-item .label {\n  position: absolute;\n  bottom: 12%;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 6px 14px;\n  background: rgba(0,0,0,0.55);\n  color: white;\n  font-size: 1rem;\n  border-radius: 12px;\n  opacity: 0;\n  transition: opacity 1s ease;\n  pointer-events: none;\n}\n\n.overlap-item:hover .label {\n  opacity: 1;\n}\n\n\/* NEW: 9-circle balanced overlapping layout *\/\n.item1 { top: 28%; left: 26%; transform: translate(-50%, -50%); }\n.item2 { top: 22%; left: 45%; transform: translate(-50%, -50%); }\n.item3 { top: 40%; left: 38%; transform: translate(-50%, -50%); }\n.item4 { top: 34%; left: 62%; transform: translate(-50%, -50%); }\n.item5 { top: 46%; left: 18%; transform: translate(-50%, -50%); }\n.item6 { top: 58%; left: 50%; transform: translate(-50%, -50%); }\n.item7 { top: 60%; left: 30%; transform: translate(-50%, -50%); }\n.item8 { top: 48%; left: 70%; transform: translate(-50%, -50%); }\n.item9 { top: 65%; left: 60%; transform: translate(-50%, -50%); }\n\n\/* Hover cinematic drift outward *\/\n.overlap-item:hover {\n  transform: translate(-50%, -50%) scale(1.85) translateY(-14px);\n  z-index: 20;\n  transition: transform 2.4s ease;\n}\n<\/style>\n\n<div class=\"overlap-gallery\">\n  <div class=\"overlap-item item1\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/an-ode-to-the-memorial\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/memorial.jpg\" alt=\"memorial\" \/>\n      <div class=\"label\">memorial<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item2\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/suddenly-we-appeared-to-be-waiting\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/metro.jpg\" alt=\"waiting\" \/>\n      <div class=\"label\">waiting<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item3\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/anatomy-of-a-break-up\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/etna.jpg\" alt=\"breakup\" \/>\n      <div class=\"label\">breakup<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item4\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/stages-of-enthusiasm\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/tinsel.jpg\" alt=\"enthusiasm\" \/>\n      <div class=\"label\">enthusiasm<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item5\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/line-is-a-circle\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/line.png\" alt=\"line\" \/>\n      <div class=\"label\">line<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item6\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/pandemic-dream-diary\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/dream.jpg\" alt=\"dream\" \/>\n      <div class=\"label\">dream<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item7\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/horizon-lines\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/horizon.jpg\" alt=\"horizon\" \/>\n      <div class=\"label\">horizon<\/div>\n    <\/a>\n  <\/div>\n\n <div class=\"overlap-item item8\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/blood-vessels\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/blood.jpg\" alt=\"vessels\" \/>\n      <div class=\"label\">vessels<\/div>\n    <\/a>\n  <\/div>\n\n  <div class=\"overlap-item item9\">\n    <a href=\"#\">\n      <a href=\"https:\/\/anacuamic.com\/index.php\/safe\/\">\n      <img decoding=\"async\" src=\"https:\/\/anacuamic.com\/artworks\/safe.jpg\" alt=\"safe\" \/>\n      <div class=\"label\">safe<\/div>\n    <\/a>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>memorial waiting breakup enthusiasm line dream horizon vessels safe<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-115","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/pages\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":25,"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/pages\/115\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/pages\/115\/revisions\/532"}],"wp:attachment":[{"href":"https:\/\/anacuamic.com\/index.php\/wp-json\/wp\/v2\/media?parent=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}