Responsive focuspoint on image with object-position

Developer
Karsten Buckstegge
Size
3,707 Kb
Views
42,504
  1. Responsive focuspoint on image with object-position Previews
  2. Responsive focuspoint on image with object-position HTML Codes
  3. Responsive focuspoint on image with object-position CSS Codes
  4. Responsive focuspoint on image with object-position JS Codes

How do I make an responsive focuspoint on image with object-position?

A simple image focuspoint implementation based on the new object-position and object-fit css properties.. What is a responsive focuspoint on image with object-position? How do you make a responsive focuspoint on image with object-position? This script and codes were developed by Karsten Buckstegge on 10 September 2022, Saturday.

Responsive focuspoint on image with object-position Previews
IQ Test

Responsive focuspoint on image with object-position - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive focuspoint on image with object-position</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure class="focus__area"> <div class="focus__picker"> <img class="focus__picker__image" src="http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg" alt="" /> <span class="focus__picker__indicator"></span> </div> <p class="focus__area__info">⬅ choose<br /> focuspoint<br />here!</p> <p class="media__info">Use bigger screen to pick a focus point!</p> <img class="focus__image" src="http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg" alt="" /> <figcaption class="focus__caption"> focus-point: <span></span> </figcaption>
</figure> <script src="js/index.js"></script>
</body>
</html>

Responsive focuspoint on image with object-position - Script Codes CSS Codes

html, body { height: 100%;
}
.focus__area__info,
.media__info { position: absolute; color: #fff; top: 0; left: 22%; margin: 0; padding: 20px; background: rgba(0, 120, 100, 0.7);
}
.media__info { display: none;
}
.focus__caption { position: absolute; right: 20px; bottom: 20px; padding: 20px; background: rgba(0, 120, 100, 0.7); color: #fff;
}
.focus__area { position: relative; margin: 0; padding: 0; width: 100%; height: 100%;
}
.focus__picker { position: absolute; width: 20%; border: 4px solid black; cursor: crosshair;
}
.focus__picker__image { width: 100%;
}
.focus__picker__indicator { position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; left: calc(50% - 5px); top: calc(50% - 5px);
}
.focus__image { width: 100%; height: 100%; object-fit: none; object-position: top 50% left 50%;
}
@media (max-width: 700px), (max-height: 300px) { .focus__caption, .focus__area__info, .focus__picker { display: none; } .media__info { display: block; left: 0; margin: 0 2%; }
}

Responsive focuspoint on image with object-position - Script Codes JS Codes

'use strict';
var focusArea = document.querySelector('.focus__area');
var focusPicker = focusArea.querySelector('.focus__picker');
var focusPickerIndicator = focusArea.querySelector('.focus__picker__indicator');
var focusImage = focusArea.querySelector('.focus__image');
var focusCaptionSpan = focusArea.querySelector('.focus__caption span');
var setFocusPoint = function setFocusPoint(e) { var focusOffset = [e.offsetY, e.offsetX]; var imageSize = [focusPicker.clientHeight, focusPicker.clientWidth]; var focusPointY = (focusOffset[0] / imageSize[0] * 100).toFixed(1); var focusPointX = (focusOffset[1] / imageSize[1] * 100).toFixed(1); focusCaptionSpan.innerHTML = 'Y: ' + focusPointY + ', X: ' + focusPointX; focusImage.style.objectPosition = 'top ' + focusPointY + '% left ' + focusPointX + '%'; focusPickerIndicator.style.top = 'calc(' + focusPointY + '% - 5px)'; focusPickerIndicator.style.left = 'calc(' + focusPointX + '% - 5px)';
};
focusPicker.addEventListener('click', setFocusPoint);
Responsive focuspoint on image with object-position - Script Codes
Responsive focuspoint on image with object-position - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded September 10, 2022
Rating 4
Size 3,707 Kb
Views 42,504
Do you need developer help for Responsive focuspoint on image with object-position?

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!

Karsten Buckstegge (MrBambule) Script Codes
Name
CSS3 Hover Button
A Pen by Karsten Buckstegge
The wheel of social fortune
Simple React Slider
The wheel of social
Dropdown Menu Animation
Even More Brokener TV
Freddy the Fly
Base64 SVG Me
Broken TV
Create amazing captions with AI!

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!