{"id":2296,"date":"2018-03-24T16:13:55","date_gmt":"2018-03-24T16:13:55","guid":{"rendered":"http:\/\/thingography.com\/?p=2296"},"modified":"2025-02-13T20:55:56","modified_gmt":"2025-02-13T20:55:56","slug":"css-menu","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-menu\/","title":{"rendered":"All Round CSS Image Menu"},"content":{"rendered":"<style>\n.ani-box {\n\tmargin: 0 auto;\n\twidth: 100%;\n\theight: auto;\n\tposition: relative;\n\tpadding-bottom: 2em;\n}\n#wrapper {\n\tmargin-right: auto;\n\tmargin-left: auto;\n\twidth: 100%;\n\theight: 600px;\n\tposition: relative;\n\tmargin-top: 0.1em;\n\tpadding-bottom: 2em;\n}\n.switch1, .switch2, .switch3, .switch4 { \n\tborder: 1px solid #000;\n\tborder-radius: 50px;\n\twidth: 100px;\n\theight: 100px;\n\tleft: 50%;\n\tmargin-left: -425px;\n\tposition: absolute;\n\ttransition: background 2s;\n\t}\n.switch1 {\n\tbackground-color: blue;\t\t\n\ttop: 0;\n}\n.switch2 {\n\tbackground-color: yellow;\n\ttop: 150px;\n}\n.switch3 {\n\tbackground-color: red; \n\ttop: 300px;\n}\n.switch4 {\n\tbackground-color: green;\n\ttop: 450px;\n}\n.switch1 p, .switch2 p, .switch3 p, .switch4 p {\n\ttext-align: center;\n\tfont-weight: bold;\n\tmargin-top: 35px;\ntop: 27px;\n\tfont-size: 24px;\n\ttext-shadow: 0 0 4px #000;\n\tcolor: #E7E7E7;\nposition: relative;\n}\n#page1, #page2, #page3, #page4 {\n\tposition: absolute; \n\twidth: 700px;\n\theight: 500px;\n\tleft: 50%;\n\tmargin-left: -735px;\n\tmargin-top: 0px;\n\topacity: 0.5;\n\ttransition: all 2s;\n}\n#page1:hover .switch1, .page1box:hover .switch1, .switch1:hover,\n#page2:hover .switch2, .page2box:hover .switch2, .switch2:hover,\n#page3:hover .switch3, .page3box:hover .switch3, .switch3:hover \n#page4:hover .switch4, .page4box:hover .switch4, .switch4:hover  { \n\tbackground: #FFFFFF;\t\t\t\t\t\t\t\t\t\t\n}\n#page1 {\n\tcolor: blue;\n\ttop: -175px;\n\ttransform: scale(0.01,0.01) rotateX(180deg);\n}\n#page2 { \n\ttop: -45px;\n\tcolor: yellow; \n\ttransform: scale(0.01,0.01) rotateY(180deg);\n}\n#page3 {\n\ttop: 105px;\n\tcolor: red;\n\ttransform: scale(0.01,0.01) rotateZ(180deg);\n}\n#page4 {\n\ttop: 250px;\n\tcolor: green; \n\ttransform: scale(0.01,0.01) rotateX(180deg);\n}\n.page1box:hover #page1{  \n\ttransform: rotateX(360deg) translate(405px,210px) scale(1,1);\n\topacity:1;\t\n\tcolor: white; \n}\n.page2box:hover #page2 {\n\ttransform: rotateY(360deg) translate(405px,80px) scale(1,1);\n\topacity:1;\n\tcolor: black;\n}\n.page3box:hover #page3 {\n\ttransform: rotateZ(360deg) translate(405px,-70px) scale(1,1);\n\topacity:1;\n\tcolor: black;\n}\n.page4box:hover #page4 {\n\ttransform: rotateX(360deg) translate(405px,-215px) scale(1,1);\n\topacity:1;\n\tcolor: white;\n}\n.ball1, .ball2, .ball3, .ball4  {\n\tposition: relative;\n\tmargin-top: 0;\n\tmargin-left: 100px;\n\twidth: 500px;\n\theight: 500px;\n\tbackground-color: blue;\n\tborder-radius: 50%;\t\n\tbox-shadow:0 0 50px 20px #000000;\n}\n.ball1 {\n\tbox-shadow:0 0 40px 20px black inset; \n}\n.ball2 {\n\tbackground-color: yellow;\n}\n.ball3 {\n\tbackground-color: red;\n}\n.ball4 {\n\tbackground-color: green;\n}\n.ball2, .ball3, .ball4 {\n\tbox-shadow: 0 0 50px 20px black;\n}\n.ball3 img {\n\twidth: 500px;\n\theight: 240px;\n\tborder-radius: 250px 250px 0 0;\t\n}\n.ball4 img {\n\tmargin-left: 2px;\t\n\twidth: 498px;\n\theight: 240px;\n\tborder-radius: 0 0 250px 250px;\t\n\tmargin-top: 260px;\n}\n.text {\t\n\tfont-size: 40px;\n\ttext-align: center;\n\tfont-weight: bold;\n\tmargin-left: 0;\n\tmargin-top: -350px;\n\tposition: relative;\nline-height:40px;\n}\n#page1 .text {\t\n\tcolor: #FFF;\n\tfont-weight: bold;\n\tz-index: 3;\n\tmargin-top: -310px;\n}\n#page2 .text {\n\tcolor: black;\n\tmargin-top: -230px;\t\n}\t\t\t\t\t\t\t\t\t\t\n#page3 .text {\n\tmargin-top: -235px;\n\tcolor: black;\n\tfont-weight: bolder;\n}\n#page4 .text {\n\tmargin-top: -400px;\n}\n#page2 .text, #page3.text, #page1 .text {\n\ttext-shadow: 0 0 10px black;\n}\n\/* ********* *\/\n#atom {\n\twidth: 500px;\n\theight: 240px;\n\tposition: relative;\n\tmargin-left: 0;\n\tmargin-top: 0;\n\tbackground-color: #0000FF;\n\tborder-radius: 250px 250px 0 0;\n\tbox-shadow: 10px 10px 50px 20px yellow inset;\n}\n.elect, .elect2, .elect3, .elect4, .elect5, .elect6, .elect7, .elect8, .elect9 {\n\twidth: 20px;\n\theight: 20px;\n\tbackground: red;\n\tborder-radius: 100px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: 0;\n\tmargin-left: -15px;\n}\n.elect {\n\tanimation:electron1 50s linear infinite;\n}\n.elect2 {\n\tanimation:electron2 50s linear infinite;\n}\n.elect3 {\n\tanimation:electron3 50s linear infinite;\n}\n.elect4 {\n\tanimation:electron4 50s linear infinite;\n}\n.elect5 {\n\tanimation:electron5 50s linear infinite;\n}\n.elect6 {\n\tanimation:electron6 50s linear infinite;\n}\n.elect7 {\n\tanimation:electron7 50s linear infinite;\n}\n.elect8 {\n\tanimation:electron8 50s linear infinite;\n}\n.elect9 {\n\tanimation:electron9 50s linear infinite;\n}\n.prop {\nwidth: 150px;\nheight: 150px;\t\nposition: relative;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -75px;\n\tmargin-left: -75px;\n}\n@keyframes electron1 {\n0%   {transform: rotateX(0deg) skew(0deg,10deg) scale(0.5,0.7);}\n100% {transform: rotateX(-30000deg) skew(-10deg,-10deg) scale(1.2,1.2);}\n}\n@keyframes electron2 {\n0%   {transform: rotateY(0deg) skew(0deg,10deg) scale(0.6,0.8);}\n100% {transform: rotateY(-30000deg) skew(-10deg,-10deg) scale(1.1,1.1);}\n}\n@keyframes electron3 {\n0%   {transform: rotateZ(0deg) skew(0deg,0deg) scale(0.1,0.1);}\n100% {transform: rotateZ(-30000deg) skew(-10deg,-10deg) scale(0.2,0.2);}\n}\n@keyframes electron4 {\n0%   {transform: rotateX(0deg) skew(0deg,0deg) scale(0.5,0.5);}\n100% {transform: rotateX(20000deg) skew(10deg,10deg) scale(0.5,0.8);}\n}\n@keyframes electron5 {\n0%   {transform: rotateY(0deg) skew(0deg,0deg)scale(0.4,0.4);;}\n100% {transform: rotateY(20000deg) skew(10deg,10deg) scale(0.8,0.8);}\n}\n@keyframes electron6 {\n0%   {transform: rotateZ(0deg) skew(0deg,0deg) scale(0.4,0.3);}\n100% {transform: rotateZ(20000deg) skew(10deg,10deg) scale(0.1,0.15);}\n}\n@keyframes electron7 {\n0%   {transform: rotateX(10deg) skew(0deg,0deg) scale(0.6,0.8);}\n100% {transform: rotateX(-40000deg) skew(-10deg,-10deg) scale(1,1);}\n}\n@keyframes electron8 {\n0%   {transform: rotateY(0deg) skew(0deg,0deg) scale(1,1);}\n100% {transform: rotateY(40000deg) skew(-10deg,-10deg) scale(1,1.2);}\n}\n@keyframes electron9 {\n0%   {transform: rotateZ(0deg) skew(10deg,0deg) scale(0.4,0.3);}\n100% {transform: rotateZ(-40000deg) skew(-10deg,-10deg) scale(0.1,0.1);}\n}\n@media screen and (max-width: 900px) {\n\t#wrapper {\t\t\n\t\ttransform: scale(0.7);\n\t}\n}\n@media screen and (max-width: 730px) {\n\t#wrapper {\t\t\n\t\ttransform: scale(0.5);\n\t}\n}\n@media screen and (max-width: 480px) {\n\t#wrapper {\n\t\ttransform: scale(0.3);\n\t\ttop: -100px;\n\t}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"wrapper\">\n<div class=\"page1box\">\n<div class=\"switch1\">\n<p>Blue<\/p>\n<\/p><\/div>\n<div id=\"page1\">\n<div class=\"ball1\"><\/div>\n<p class=\"text\"> Thingography.com<br \/> CSS Animation<br \/> Gallery<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"page2box\">\n<div class=\"switch2\">\n<p>Yellow<\/p>\n<\/p><\/div>\n<div id=\"page2\">\n<div class=\"ball2\">\n<div id=\"atom\">\n<div class=\"elect\">  <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect2\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect3\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect4\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect5\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect6\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect7\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect8\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<div class=\"elect9\"> <img loading=\"lazy\" decoding=\"async\" class=\"prop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/electron.png\" alt=\"Atom\" width=\"150\" height=\"150\"\/><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"text\"> Thingography.com<br \/> CSS Animation<br \/> Gallery<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"page3box\">\n<div class=\"switch3\">\n<p>Red<\/p>\n<\/p><\/div>\n<div id=\"page3\">\n<div class=\"ball3\">  <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/spiderwhite.jpg\" alt=\"White Spider\" width=\"500\" height=\"240\" \/>  <\/div>\n<p class=\"text\"> Thingography.com<br \/> Photo<br \/> Gallery<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"page4box\">\n<div class=\"switch4\">\n<p>Green<\/p>\n<\/p><\/div>\n<div id=\"page4\">\n<div class=\"ball4\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/menu\/rose.jpg\" alt=\"red roses\" width=\"498\" height=\"240\" \/>  <\/div>\n<p class=\"text\"> Thingography.com<br \/> Photo Gallery<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Ani  --><\/p>\n<div class=\"below-ani\">A Circular Pure CSS Menu &#8211; Hover over each colored ball to open menu<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Blue Thingography.com CSS Animation Gallery Yellow Thingography.com CSS Animation Gallery Red Thingography.com Photo Gallery Green Thingography.com Photo Gallery A Circular Pure CSS Menu &#8211; Hover over each colored ball to open menu<\/p>\n","protected":false},"author":2,"featured_media":2594,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,223,4,5,188],"class_list":["post-2296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-circular","tag-css","tag-css-animation","tag-menu"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2296"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2296\/revisions"}],"predecessor-version":[{"id":2625,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2296\/revisions\/2625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2594"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}