<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" rel="stylesheet"> <style> #atomic {height: 200px; width: 500px; margin: auto; position: relative; overflow: hidden} #atomic-img {height: 200px; width: 500px; position: absolute; background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1520929712_79.jpg)} #atomic-bg {width: 500px; height: 200px; background: rgba(0,0,0,0.5); position: absolute; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); opacity: 0; -webkit-transition: 0.5s ease} #atomic:hover #atomic-bg {-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1} #atomic-txt1, #atomic-txt2 {width: 500px; height: 200px; position: absolute; text-align: center; line-height: 200px; background: none; font-family: archivo black; text-transform: uppercase; font-size: 55px; letter-spacing: -4px; top: 0; -webkit-transition: 0.35s ease; -moz-transition: 0.35s; -ms-transition: 0.35s; -o-transition: 0.35s} #atomic-txt1 {color: #CBBDF0; background: none; -webkit-clip-path: polygon(0 0, 100% 0, 100% 52%, 0 69%); clip-path: polygon(0 0, 100% 0, 100% 43%, 0 58%); top: -10px; } #atomic-txt2 {color: #E1C267; -webkit-clip-path: polygon(0 29%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 58%, 100% 43%, 100% 100%, 0% 100%); top: 10px} #atomic:hover #atomic-txt1 {top: -1.5px} #atomic:hover #atomic-txt2 {top: 1.5px} #atomic-arrow1, #atomic-arrow2 {width: 2px; height: 50px; background: #AAF0DD; position: absolute; -webkit-transform: rotate(-4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg);} #atomic-arrow1 {top: 110px; left: 85px} #atomic-arrow1::after {background: #AAF0DD; content: ""; display: inline-block; height: 50px; width: 2px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); position: relative; left: 25px; top: 25px} #atomic-arrow2 {right: 85px; bottom: 110px;} #atomic-arrow2::after {background: #AAF0DD; content: ""; display: inline-block; height: 50px; width: 2px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); position: relative; left: -25px; top: -25px} #atomic-links1, #atomic-links2 {height: 20px; width: 265px; background: none; font-family: cousine; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); text-transform: uppercase; line-height: 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; position: absolute} #atomic-links1, #atomic-links1 a, #atomic-links1 a:hover {text-align: right; color: #E1C267; text-decoration: none; right: 155px; top: 42px} #atomic-links2, #atomic-links2 a, #atomic-links2 a:hover {text-align: left; color: #DE6868; text-decoration: none; left: 155px; bottom: 42px} </style> <div id="atomic"> <div id="atomic-img"></div> <div id="atomic-bg"> <div id="atomic-txt1">Virág</div> <div id="atomic-txt2">Virág</div> <div id="atomic-arrow1"></div> <div id="atomic-arrow2"></div> <div id="atomic-links1">link 1 - link 2 - link 3 - link 4 -<a href="https://jegvirag.gportal.hu">virag</a></div> <div id="atomic-links2">link 1 - link 2 - link 3 - link 4 - link 5 </div> </div> </div>