Centered background Image with hot spots
How do I make an centered background image with hot spots?
Fully responsive! Also, animal.. What is a centered background image with hot spots? How do you make a centered background image with hot spots? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.
Centered background Image with hot spots - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>centered background Image with hot spots</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--image from google image search-->
<div class="container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Centered background Image with hot spots - Script Codes CSS Codes
html, body { width: 100%; height: 100%;
}
.container { width: 100%; height: 100%; position: relative; background-image: url(http://www.wildlife-photography-tips.com/images/black-and-white-nature-photography-stag.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;
}
.hot-spot { width: 20px; height: 20px; background-color: #D29A4E; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; opacity: 0.8; z-index: 1;
}
.hot-spot:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 2px solid #D29A4E; width: 20px; height: 20px; border-radius: 50%; opacity: 0; -webkit-transition: 0.2s all; transition: 0.2s all;
}
.hot-spot:hover { cursor: pointer; opacity: 1;
}
.hot-spot:hover:after { width: 25px; height: 25px; opacity: 1;
}
.speech-bubble { position: absolute; width: 150px; background-color: white; border-radius: 4px; text-align: center; display: none; z-index: 2;
}
.speech-bubble h1 { font-size: 20px; margin-top: 12px; color: #333333;
}
.speech-bubble p { margin-top: 4px; margin-bottom: 12px; font-style: italic; color: #888888;
}
.speech-bubble:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 10px; margin-left: -10px;
}
Centered background Image with hot spots - Script Codes JS Codes
var imageWidth = 2048, imageHeight = 1364, imageAspectRatio = imageWidth / imageHeight, $window = $(window);
var hotSpots = [{ 'title': 'Mouth', 'description': 'scream.', 'x': -600, 'y': -180
}, { 'title': 'Body', 'description': 'Look at it.', 'x': 108, 'y': 20
}, { 'title': 'Antlers', 'description': 'They crazy.', 'x': 40, 'y': -170
}, { 'title': 'This Ear', 'description': 'It can hear things.', 'x': -265, 'y': -145
}];
function appendHotSpots() { for (var i = 0; i < hotSpots.length; i++) { var $hotSpot = $('<div>').addClass('hot-spot'); $('.container').append($hotSpot); } positionHotSpots();
}
function appendSpeechBubble() { var $speechBubble = $('<div>').addClass('speech-bubble'); $('.container').append($speechBubble);
}
function handleHotSpotMouseover(e) { var $currentHotSpot = $(e.currentTarget), currentIndex = $currentHotSpot.index(), $speechBubble = $('.speech-bubble'), title = hotSpots[currentIndex]['title'], description = hotSpots[currentIndex]['description'], hotSpotTop = $currentHotSpot.offset().top, hotSpotLeft = $currentHotSpot.offset().left, hotSpotHalfSize = $currentHotSpot.width() / 2, speechBubbleHalfSize = $speechBubble.width() / 2, topTarget = hotSpotTop - $speechBubble.height(), leftTarget = (hotSpotLeft - (speechBubbleHalfSize)) + hotSpotHalfSize; $speechBubble.empty(); $speechBubble.append($('<h1>').text(title)); $speechBubble.append($('<p>').text(description)); $speechBubble.css({ 'top': topTarget - 20, 'left': leftTarget, 'display': 'block' }).stop().animate({ opacity: 1 }, 200);
}
function handleHotSpotMouseout(){ var $speechBubble = $('.speech-bubble'); $speechBubble.stop().animate({ opacity: 0 }, 200, function(){ $speechBubble.hide(); });
}
function positionHotSpots() { var windowWidth = $window.width(), windowHeight = $window.height(), windowAspectRatio = windowWidth / windowHeight, $hotSpot = $('.hot-spot'); $hotSpot.each(function(index) { var xPos = hotSpots[index]['x'], yPos = hotSpots[index]['y'], desiredLeft = 0, desiredTop = 0; if (windowAspectRatio > imageAspectRatio) { yPos = (yPos / imageHeight) * 100; xPos = (xPos / imageWidth) * 100; } else { yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100; xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100; } $(this).css({ 'margin-top': yPos + '%', 'margin-left': xPos + '%' }); });
}
appendHotSpots();
appendSpeechBubble();
$(window).resize(positionHotSpots);
$('.hot-spot').on('mouseover', handleHotSpotMouseover);
$('.hot-spot').on('mouseout', handleHotSpotMouseout);
Developer | Adam Grayson |
Username | agrayson |
Uploaded | November 10, 2022 |
Rating | 4 |
Size | 3,869 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Random Weapon Generator | 4,209 Kb |
Form Progress Bar | 4,644 Kb |
Responsive Carousel | 3,291 Kb |
CCS3 Navigation Hover Effect | 1,953 Kb |
Multi-Column Responsive Carousel | 5,686 Kb |
Spinning Circles | 3,581 Kb |
Sliding Lines Animation | 2,572 Kb |
Minimal Solar System | 3,425 Kb |
Dungeon Crawler | 3,644 Kb |
Drag and Drop File Preview | 3,444 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Header | Er40 | 1,542 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
React TODO | Enieste | 3,320 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!