CSS Hotspots with Pulse Effect

freefrontend.com freefrontend.com3 years ago in #Dev Love102

Pure CSS responsive hotspots with pulse effect. Pulse effect made with CSS animation and transform: scale(). Photo by Julian O’hayon on Unsplash.Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. <section class=”hotspots–wrapper”> <img src=”https://voltomedia.com/fresh/pure-css-responsive-hotspots.jpg” alt=”black Macbook near black iPhone 7 Plus and black Apple Watch” class=”hotspots–figure”> <a class=”hotspot hotspot–iphone” href=”#”> <span class=”hotspot–title”>iPhone 7</span> <span class=”hotspot–cta”></span> </a> <a class=”hotspot hotspot–macbook” href=”#”> <span class=”hotspot–title”>MacBook</span> <span class=”hotspot–cta”></span> </a> <a class=”hotspot hotspot–watch” href=”#”> <span class=”hotspot–title hotspot–title__right”>Apple Watch</span> <span class=”hotspot–cta”></span> </a> </section> @import url(‘https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap’); body { margin: 0; padding: 0; display: flex; min-height: 100vh; } .hotspots–wrapper { position: relative; margin: auto; max-width: 960px; font-family: ‘Maven Pro’, sans-srif; font-weight: 500; } .hotspots–figure { max-width: 100%; } .hotspot { position: absolute; display: block; } .hotspot–title { display: inline-block; padding-right: 10px; color: #ff0000; text-transform: uppercase; line-height: 50px; font-size: 12px; letter-spacing: 1px; transition: all cubic-bezier(.8,0,.2,1) .4s; } .hotspot–title__right { float: right; padding-right: 0; padding-left: 10px; } .hotspot–cta { position: relative; float: right; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background: #ff0000; transition: all cubic-bezier(.8,0,.2,1) .4s; } .hotspot–cta::after { content: ”; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: #fff; z-index: 2; transition: opacity .6s; animation: pulse 1.5s cubic-bezier(.8,0,.2,1) 0s infinite; } .hotspot:hover .hotspot–cta { transform: scale(.6); } .hotspot:hover .hotspot–cta:after { opacity: 0; } @keyframes pulse { 0% {transform: scale(0.4);} 33% {transform: scale(1);} 66% {transform: scale(0.4);} 100% {transform: scale(0.4);} } .hotspot–iphone { top: 62%; right: 68%; } .hotspot–macbook { top: 22%; right: 48%; } .hotspot–watch { top: 72%; left: 45%; } @media screen and (max-width: 640px) { .hotspot–title { line-height: 40px; font-size: 10px; } .hotspot–cta { width: 40px; height: 40px; } } @media screen and (max-width: 420px) { .hotspot–title { line-height: 30px; font-size: 9px; } .hotspot–cta { width: 30px; height: 30px; } } @media screen and (max-width: 320px) { .hotspot–title { display: none; } .hotspot–cta { width: 20px; height: 20px; } .hotspot–cta::after { width: 5px; height: 5px; } } URL Out – https://freefrontend.com/css-hotspots-with-pulse-effect/Author – freefrontend.comDate – 2019-10-09 20:27:31

Like to keep reading?

This article first appeared on freefrontend.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply