{"id":580,"date":"2023-03-11T02:19:54","date_gmt":"2023-03-10T23:19:54","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=580"},"modified":"2023-03-28T23:53:46","modified_gmt":"2023-03-28T20:53:46","slug":"hover-effekty","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/580\/","title":{"rendered":"Hover effects"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"930\" style=\"aspect-ratio: 1758 \/ 930;\" width=\"1758\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-11_00-14-48.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div class=&quot;container&quot;&gt;\n  &lt;div class=&quot;elem first&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/1.jpg&quot; \/&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem second&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/2.jpg&quot; \/&gt;\n    &lt;div class=&quot;partialBorder&quot;&gt;\n      &lt;div class=&quot;leftTop&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;rightTop&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;leftBot&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;rightBot&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem thrird&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/3.jpg&quot; \/&gt;\n    &lt;div class=&quot;line topToBot&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;line botToTop&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem fourth&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/4.jpg&quot; \/&gt;\n    &lt;div class=&quot;lineCont&quot;&gt;\n      &lt;div class=&quot;line top&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;line right&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;line bottom&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;line left&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;  \n  &lt;\/div&gt;\n  &lt;div class=&quot;elem fifth&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/5.jpg&quot; \/&gt;\n    &lt;span class=&quot;left&quot;&gt;Hover me!&lt;\/span&gt;\n    &lt;span class=&quot;right&quot;&gt;WoW WoW!!!&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem sixth&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/6.jpg&quot; \/&gt;\n    &lt;div class=&quot;reveal&quot;&gt;\n      &lt;span&gt;Revealing text!&lt;\/span&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem seventh&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/7.jpg&quot; \/&gt;\n    &lt;span class=&quot;bird&quot;&gt;Very bird!&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem eighth&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/8.jpg&quot; \/&gt;\n    &lt;div class=&quot;reveal&quot;&gt;\n      &lt;span&gt;Vertically revealing!&lt;\/span&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;elem ninth&quot;&gt;\n    &lt;img src=&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/9.jpg&quot; \/&gt;\n    &lt;span class=&quot;umad&quot;&gt;UMAD BRO?&lt;\/span&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.innerBox, .first:after, .partialBorder, .fourth .lineCont, .fifth:after, .sixth .reveal, .eighth .reveal {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 60;\n}\n\n*,\n*:before,\n*:after {\n  -webkit-transition: 0.5s;\n  -moz-transition: 0.5s;\n  -o-transition: 0.5s;\n  transition: 0.5s;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  font-size: 0px;\n}\n\nbody {\n  padding-top: 20px;\n}\n\n.container {\n  margin: 0 auto;\n  text-align: center;\n}\n\n.elem {\n  width: 32vw;\n  display: inline-block;\n  color: white;\n  font-size: 2em;\n  position: relative;\n  height: 20vw;\n  overflow: hidden;\n}\n\n.elem:before {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  opacity: 0;\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n}\n\n.elem:after {\n  content: &quot;&quot;;\n  position: absolute;\n}\n\n.elem img {\n  width: 32vw;\n  height: 20vw;\n}\n\n.elem:hover:before {\n  opacity: 1;\n}\n\n\/* FIRST ELEMENT *\/\n.first:before {\n  background-color: lightBlue;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/1.jpg&quot;);\n  background-blend-mode: luminosity;\n}\n\n.first:after {\n  opacity: 0;\n  border: 0.15vw solid #fff;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.5);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.5);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.5);\n  transform: translate3d(0px, 0px, 0px) scale(0.5);\n}\n\n.first:hover:after {\n  opacity: 1;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  transform: translate3d(0px, 0px, 0px) scale(0.95);\n}\n\n\/* SECOND ELEMENT *\/\n.second:before {\n  background-color: #e85858;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/2.jpg&quot;);\n  background-blend-mode: darken;\n}\n\n.partialBorder {\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.5);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.5);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.5);\n  transform: translate3d(0px, 0px, 0px) scale(0.5);\n  opacity: 0;\n}\n\n.partialBorder &gt; div {\n  position: absolute;\n  height: 10%;\n  width: 10%;\n  border: 0.15vw solid #fff;\n}\n\n.partialBorder .leftTop {\n  left: 0;\n  top: 0;\n  border-right: none;\n  border-bottom: none;\n}\n\n.partialBorder .rightTop {\n  right: 0;\n  top: 0;\n  border-left: none;\n  border-bottom: none;\n}\n\n.partialBorder .leftBot {\n  left: 0;\n  bottom: 0;\n  border-right: none;\n  border-top: none;\n}\n\n.partialBorder .rightBot {\n  right: 0;\n  bottom: 0;\n  border-left: none;\n  border-top: none;\n}\n\n.second:hover .partialBorder {\n  opacity: 1;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  transform: translate3d(0px, 0px, 0px) scale(0.95);\n}\n\n\/* THRIRD ELEMENT *\/\n.thrird:before {\n  background-color: #34c7a5;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/3.jpg&quot;);\n  background-blend-mode: exclusion;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  transform: translate3d(0px, 0px, 0px) scale(1.3);\n}\n\n.thrird img {\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  transform: translate3d(0px, 0px, 0px) scale(1.3);\n}\n\n.thrird:hover img,\n.thrird:hover:before {\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1);\n  transform: translate3d(0px, 0px, 0px) scale(1);\n}\n\n.thrird .line {\n  position: absolute;\n  top: 50%;\n  left: 5%;\n  width: 90%;\n  height: 0.1vw;\n  background: #fff;\n  z-index: 500;\n  -webkit-transform-origin: 50% 50%;\n  -moz-transform-origin: 50% 50%;\n  -o-transform-origin: 50% 50%;\n  -ms-transform-origin: 50% 50%;\n  transform-origin: 50% 50%;\n}\n\n.thrird:hover .line.topToBot {\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(32deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(32deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(32deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(32deg);\n  transform: translate3d(0px, 0px, 0px) rotate(32deg);\n}\n\n.thrird:hover .line.botToTop {\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(-32deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(-32deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(-32deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(-32deg);\n  transform: translate3d(0px, 0px, 0px) rotate(-32deg);\n}\n\n\/* FOURTH ELEMENT *\/\n.fourth:before {\n  background-color: #a7ba38;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/4.jpg&quot;);\n  background-blend-mode: luminosity;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  transform: translate3d(0px, 0px, 0px) scale(1.3);\n}\n\n.fourth img {\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1.3);\n  transform: translate3d(0px, 0px, 0px) scale(1.3);\n}\n\n.fourth:hover img,\n.fourth:hover:before {\n  -webkit-transform: scale(1.3) translateX(50px);\n  -moz-transform: scale(1.3) translateX(50px);\n  -ms-transform: scale(1.3) translateX(50px);\n  -o-transform: scale(1.3) translateX(50px);\n  transform: scale(1.3) translateX(50px);\n}\n\n.fourth .lineCont {\n  overflow: hidden;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.95);\n  transform: translate3d(0px, 0px, 0px) scale(0.95);\n}\n\n.fourth .line {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: 0.1vw;\n  background: #fff;\n  -webkit-transform-origin: 0 0;\n  -moz-transform-origin: 0 0;\n  -o-transform-origin: 0 0;\n  -ms-transform-origin: 0 0;\n  transform-origin: 0 0;\n}\n\n.fourth:hover .line.top {\n  top: 0;\n}\n\n.fourth .line.right {\n  -webkit-transition-delay: 0.1s;\n  -moz-transition-delay: 0.1s;\n  -o-transition-delay: 0.1s;\n  transition-delay: 0.1s;\n}\n\n.fourth:hover .line.right {\n  left: 100%;\n  top: 0;\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  width: 62.5%;\n}\n\n.fourth .line.bottom {\n  -webkit-transition-delay: 0.2s;\n  -moz-transition-delay: 0.2s;\n  -o-transition-delay: 0.2s;\n  transition-delay: 0.2s;\n}\n\n.fourth:hover .line.bottom {\n  top: -webkit-calc(100% - 0.1vw);\n  top: -moz-calc(100% - 0.1vw);\n  top: calc(100% - 0.1vw);\n}\n\n.fourth .line.left {\n  -webkit-transition-delay: 0.3s;\n  -moz-transition-delay: 0.3s;\n  -o-transition-delay: 0.3s;\n  transition-delay: 0.3s;\n}\n\n.fourth:hover .line.left {\n  left: 0;\n  top: 100%;\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(-90deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(-90deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(-90deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(-90deg);\n  transform: translate3d(0px, 0px, 0px) rotate(-90deg);\n  width: 62.5%;\n}\n\n\/* FIFTH ELEMENT *\/\n.fifth:before {\n  background-color: #c85ed6;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/5.jpg&quot;);\n  background-blend-mode: difference;\n}\n\n.fifth:before,\n.fifth img {\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1.2);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1.2);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1.2);\n  transform: translate3d(0px, 0px, 0px) scale(1.2);\n}\n\n.fifth:hover:before,\n.fifth:hover img {\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1.1);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1.1);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1.1);\n  transform: translate3d(0px, 0px, 0px) scale(1.1);\n}\n\n.fifth:after {\n  border: 5px solid #fff;\n  height: 50%;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.9);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.9);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.9);\n  transform: translate3d(0px, 0px, 0px) scale(0.9);\n}\n\n.fifth:hover:after {\n  top: 20%;\n}\n\n.fifth .left,\n.fifth .right {\n  position: absolute;\n  font-size: 2vw;\n  z-index: 100;\n}\n\n.fifth .left {\n  left: 13%;\n  top: 10%;\n}\n\n.fifth:hover .left {\n  top: 54%;\n}\n\n.fifth .right {\n  left: 40%;\n  top: 110%;\n}\n\n.fifth:hover .right {\n  top: 54%;\n}\n\n\/* SIXTH ELEMENT *\/\n.sixth:before {\n  background-color: #5067e6;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/6.jpg&quot;);\n  background-blend-mode: hard-light;\n}\n\n.sixth .reveal {\n  height: 30%;\n  max-width: 0%;\n  top: 70%;\n  overflow: hidden;\n}\n\n.sixth .reveal span {\n  position: absolute;\n  font-size: 2vw;\n  top: 0;\n  left: 2.4vw;\n  white-space: nowrap;\n}\n\n.sixth:hover .reveal {\n  max-width: 50%;\n}\n\n\/* SEVENTH ELEMENT *\/\n.seventh:before {\n  background-color: #282913;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/7.jpg&quot;);\n  background-blend-mode: color-dodge;\n}\n\n.seventh .bird {\n  position: absolute;\n  display: block;\n  opacity: 0;\n  left: 65%;\n  top: 15%;\n  font-size: 2vw;\n  color: #000;\n  z-index: 100;\n  -webkit-transform-origin: 0 0;\n  -moz-transform-origin: 0 0;\n  -o-transform-origin: 0 0;\n  -ms-transform-origin: 0 0;\n  transform-origin: 0 0;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.7) rotate(30deg);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(0.7) rotate(30deg);\n  -ms-transform: translate3d(0px, 0px, 0px) scale(0.7) rotate(30deg);\n  -o-transform: translate3d(0px, 0px, 0px) scale(0.7) rotate(30deg);\n  transform: translate3d(0px, 0px, 0px) scale(0.7) rotate(30deg);\n}\n\n.seventh:hover .bird {\n  opacity: 1;\n  -webkit-transform: translate3d(0px, 0px, 0px) scale(1) rotate(30deg);\n  -moz-transform: translate3d(0px, 0px, 0px) scale(1) rotate(30deg);\n  -ms-transform: translate3d(0px, 0px, 0px) scale(1) rotate(30deg);\n  -o-transform: translate3d(0px, 0px, 0px) scale(1) rotate(30deg);\n  transform: translate3d(0px, 0px, 0px) scale(1) rotate(30deg);\n}\n\n\/* EIGHTH ELEMENT *\/\n.eighth:before {\n  background-color: #2c5c4d;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/8.jpg&quot;);\n  background-blend-mode: saturation;\n}\n\n.eighth .reveal {\n  left: 80%;\n  width: 20%;\n  max-height: 0%;\n  overflow: hidden;\n}\n\n.eighth .reveal span {\n  position: absolute;\n  font-size: 2vw;\n  top: 10%;\n  white-space: nowrap;\n  padding: 0.2vw;\n  border: 3px solid #fff;\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  transform: translate3d(0px, 0px, 0px) rotate(90deg);\n  -webkit-transform-origin: 0 0;\n  -moz-transform-origin: 0 0;\n  -o-transform-origin: 0 0;\n  -ms-transform-origin: 0 0;\n  transform-origin: 0 0;\n}\n\n.eighth:hover .reveal {\n  max-height: 100%;\n}\n\n\/* NINTH ELEMENT *\/\n.ninth:before {\n  background-color: #b35977;\n  background-image: url(&quot;https:\/\/tympanus.net\/Development\/HoverEffectIdeas\/img\/9.jpg&quot;);\n  background-blend-mode: soft-light;\n  -webkit-transform-origin: 50% 50%;\n  -moz-transform-origin: 50% 50%;\n  -o-transform-origin: 50% 50%;\n  -ms-transform-origin: 50% 50%;\n  transform-origin: 50% 50%;\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  transform: translate3d(0px, 0px, 0px) rotate(180deg);\n}\n\n.ninth .umad {\n  position: absolute;\n  display: block;\n  opacity: 0;\n  left: 40%;\n  top: 75%;\n  font-size: 2vw;\n  color: #fff;\n  z-index: 100;\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(180deg);\n  transform: translate3d(0px, 0px, 0px) rotate(180deg);\n}\n\n.ninth:hover .umad {\n  opacity: 1;\n  -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg);\n  -moz-transform: translate3d(0px, 0px, 0px) rotate(0deg);\n  -ms-transform: translate3d(0px, 0px, 0px) rotate(0deg);\n  -o-transform: translate3d(0px, 0px, 0px) rotate(0deg);\n  transform: translate3d(0px, 0px, 0px) rotate(0deg);\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[45,16],"class_list":["post-580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-hover","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=580"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/580\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/581"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}