We Keep Coding

fix hotspot image on screen

i changed the display of hotspots but I want to fix the hotspots location on the screen rather than on the photo. I want hotspots to follow the screen when I navigate through the panoramic view can i do this ?
I want to give perspective to hotspots my goal is to get hotspots more flat on the ground
.pnlm-hotspot-base {
position: absolute;
visibility: hidden;
cursor: default;
vertical-align: middle;
left: 0px;
top: 80px;
z-index: 1;
transform: skewX(-50deg);
transform-origin: 10% 30%;
}
.custom-hotspot-front {
position: absolute;
height: 50px;
width: 55px;
transform-origin: center;
transform-style: preserve-3d;
background-image: url("forward.png");
background-repeat: no-repeat;
background-position: 5px 0px;
transform: skewX(-50deg);
transform-origin: 10% 30%;
}
.custom-hotspot-front:hover {
background-color: rgba(173, 239, 255, 0.5);
perspective: 300px;
border-radius: 50%;
width: 60px;
height: 60px;
}
I tried something like this but it didn't work,
I want to do something like this;
Is it possible to do this with css?
and the image of the hotspots that I have obtained looks like this

Image crop overlay

On an image upload page I have a preview of the image. I would like create an overlay that shows the image in a rectangle in the middle, with an opaque overlay around the outside of the rectangle.
Similar to this:
I am able to create a div overlay, but I need to reverse the opaque black background to be on the rest of the image but not on the rectangle. This way I can preview to the user what the final product will look like.
Here's what I have:
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
max-width: 100%;
height: 100%;
aspect-ratio: 1 / 1.42;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 150px;
border-radius: 0.5rem;
}
<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>
Requirements
I need to keep the aspect-ratio and relative size of the rectangle consistent.
No magic numbers or fixed width/height unless dynamically calculated per image, these images will be any size or dimensions and the layout needs to be responsive to (nearly) any screen size.
I can't change the markup too much because I'm working with the drag and drop api to move the rectangle within the image wrapper by changing its left and top positions.
I would like to use CSS or Javascript to solve this, not more HTML
Not looking to use object-fit: cover as I need the entire image visible in its native dimensions.

I hope the below code meets your requirements and solves your problem.
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0.5rem;
width: 100%;
overflow: hidden;
}
.overlay:before{
position: absolute;
content: '';
aspect-ratio: 1 / 1.42;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0px 0px 0px 145px rgba(0, 0, 0, 0.4);
}
<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>

How can I create a circle with elements at the very end of its axis?

I'll be using some SVGs that will be those avatars on the axis. For now all I need is a hint on how to set those avatars at the very end of every axis.
I am trying to achieve this:
This the code I have so far:
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
}
<div class='squareLoader'></div>
And here is a codepen in case you want to take a look.
Is there any guide or someone can help me on how to achieve this?
I can use flexbox and also I am using React Native. Just in case.

Make squareLoader a relative parent
Position element in corners using translate, top, left
Share styles wherever possible
Store repeated offset value in CSS variable
:root {
--offset: -1.4em;
}
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
.squareLoader img {
position: absolute;
width: 50px;
}
.one, .three {
left: 50%;
transform: translateX(-50%);
}
.two, .four {
top: 50%;
transform: translateY(-50%);
}
.one {
top: var(--offset);
}
.two {
right: var(--offset);
}
.three {
bottom: var(--offset);
}
.four {
left: var(--offset);
}
<div class="squareLoader">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="one">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="two">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="three">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="four">
</div>
https://jsfiddle.net/uf2t5p6r/3/

If I understand your post correctly, you want to place SVG images on the North, South, East, and West points of a circle with CSS; It is definitely possible to do this with CSS, but it depends completely on the size of the container and the size of the images being used.
The example circle you provided has a set height and width, so assuming that your SVG images are also a set size and do not change with page size you can do something like this.
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
/* added 'position: relative', because parent elements of absolute positioned elements have to be positioned to prevent mayhem */
position: relative;
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
}
.avatar {
position: absolute;
left: 75px;
top: 75px;
border: 1px solid black;
height: 50px;
width: 50px;
}
.avatarN {
top: -25px;
}
.avatarS {
top: 175px;
}
.avatarE {
left: 175px;
}
.avatarW {
left: -25px;
}
and the HTML with .avatar <div>s (you can stick the SVG images inside these divs):
<div class='squareLoader'>
<div class="avatar avatarN"></div>
<div class="avatar avatarS"></div>
<div class="avatar avatarE"></div>
<div class="avatar avatarW"></div>
</div>
In the previous example all four avatar <div>s are given a height and width of 50px.
.avatarN has a top position of -25px because that is half of the image's height and a left position of 75px (half of .squareLoader's width minus half of the image's width).
.avatarW has a top position of 75px (half of .squareLoader's height minus half of the image's height) and a left position of 25px, which is half of the image's height.
And so on for the other divs.
If you are going to make your .squareLoader <div> resize based on the page size, and the images resize based on page size, you can use the calc() CSS function which can be used anywhere a length unit is allowed in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
w3Schools has a pretty decent cursory explanation of all the units allowed in CSS:
https://www.w3schools.com/cssref/css_units.asp
And also, here's their page on position values in CSS as well:
https://www.w3schools.com/cssref/pr_class_position.asp
Whether or not you are using flexbox, you'll still have to use the position property to get the images where you want them.

One idea to create this is to consider only background and it will be easier to handle:
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 250px;
width: 250px;
background:
url(https://picsum.photos/50/50?image=1069) top center,
url(https://picsum.photos/50/50?image=1069) bottom center,
url(https://picsum.photos/50/50?image=1069) left center,
url(https://picsum.photos/50/50?image=1069) right center,
/*the circle*/
radial-gradient(farthest-side,
#fff calc(100% - 32px),#000 calc(100% - 30px),
#000 calc(100% - 30px),#000 calc(100% - 20px),
transparent calc(100% - 18px));
background-repeat:no-repeat;
}
<div class='squareLoader'></div>

Resizing images within flexbox render incorrectly in Chrome

Background
I am trying to make a div where an image is on one end with a text portion on the other (taking up the rest of the available space). The image is sized relative to the window width and the text is center-aligned within the space available.
Also, the image has icons that are absolutely positioned on it, relative to it's size.
You can test it for yourself here
HTML:
<div id="previousVideo" onclick="backVideo();" title="Back">
<div class="videoNameContainer">
<p class="videoName"></p>
</div>
<div class="videoImageContainer">
<div class="videoImageWrapper">
<img class="videoImage" src="" />
<span class="fa fa-backward"></span>
<p class="videoTime"></p>
</div>
</div>
</div>
CSS:
#previousVideo,
#nextVideo {
display: flex;
padding: 5px;
width: 25%;
height: 40%;
cursor: pointer;
}
.videoNameContainer {
width: 100%;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.videoImageContainer {
height: 100%;
display: flex;
width: 40%;
align-items: center;
}
.videoImageWrapper {
width: 100%;
max-height: 100%;
display: flex;
position: relative;
}
.videoName {
margin: 0;
max-height: 100%;
overflow: hidden;
background-color: white;
}
.videoTime {
position: absolute;
bottom: 0;
right: 3px;
color: white;
margin: 0;
font-size: 0.8em;
}
#previousVideo .videoNameContainer {
margin-right: 5px;
}
#previousVideo .videoImageContainer {
margin-left: auto;
}
.fa-backward, .fa-forward {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Question
Upon resizing the window of Firefox, the image resizes and everything follows the CSS.
Yet, doing the same on Chrome, the image does not resize at all:
Why is this happening? Thanks ahead!
UPDATE:
On adding width:100% to the image, Chrome does not maintain the aspect ratio of the image:

you container is resizing, but the img is overflowing.
You need to add width:100% to your img, so it resizes to whatever width the container has.
.videoImage{
width:100%;
height:100%;
}
It seems in the absense of a width declaration for the image itself, Firefox is resizing the img to the container, while Chrome is just keeping the image actual width.

How to center vertically an absolutely positioned scaled element?

Without scale code works fine, but I need to center vertically an already scaled element. I am looking for solution using CSS or JS approaches.
Also I can not use transform-origin CSS property because it's unsupported in some browsers that I need to support...
https://jsfiddle.net/o62ja9r6/17/
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
top: 50%;
transform: scale(0.4) translateY(-50%);
/* transform: translateY(-50%); // <--- it works */
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>

Order matters, swap translateY with scale.
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%) scale(0.4);
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Quick Explination
If you have an element that is 100px tall and you translate it along the y-axis by -50% it will move up 50% of it's height, which would be 50px. If you scale that 100px tall element first, down to 40% of it's height, then it will be 40px tall when you try to translate it along the y-axis, which will only move it up 20px.

Instead of translate you can use simple CSS for this
.vertical-center {
top: 0;
left:0px;
bottom:0px;
right:0px;
margin: auto;
transform: scale(0.4);
}
for working demo click here