Showing the cropped image over the original using css - javascript

the output that I want
the one that I have implemented so far
The grey colour background is the background colour of the lined div which is in absolute position to show the crop selection. I want the area inside the line without any colour so that part of the image would be visible and rest should be of grey background as it is.
.bounded-image {
width: fit-content;
position: relative;
}
img {
width: 292px;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
box-sizing: border-box;
width: 140.816px;
height: 260.12px;
top: 71.2428px;
left: 76.4561px;
background: transparent;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: black;
opacity: 0.4
}
<div className="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div className="bg-image"></div>
<div className="bordered-image" ></div>
</div>

I have prepared a possible solution to your problem. However, the question is whether the inner <div class="bordered-image"> is a fixed size? Because otherwise you need to adjust the value of the background-size: calc(170%); property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bounded-image {
width: fit-content;
position: relative;
width: 500px;
height: 700px;
}
img {
width: 100%;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
width: 300px;
height: 450px;
top: 130px;
left: 100px;
background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a);
background-position: center;
background-size: calc(170%);
background-repeat: no-repeat;
z-index: 5;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div class="bordered-image"></div>
<div class="bg-image"></div>
</div>
</body>
</html>

Related

How to change the height of a vertical line on the page as you scroll by it

I created a vertical line on my webpage, and want the line to grow/shrink as the user scrolls by it. Right now the line is just staying the same height the entire time. If you look at this website, https://robbowen.digital/ a good example of what I would like is shown. I have been looking into parallax but can't quite seem to figure it out. Can anyone help? Is this something simple that can be implemented? Here is my codepen https://codepen.io/atrain42/pen/OJQLPqx
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="vertical"></div>
<header>
<h1>hello</h1>
</header>
<section>
<h1>section 01</h1>
</section>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
header {
position: relative;
width: 100vw;
height: 100vh;
background-color: aquamarine;
z-index: 1;
}
header h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
section {
position: relative;
width: 100vw;
height: 100vh;
background-color: rgb(235, 198, 245);
z-index: 1;
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
.container {
position: relative;
z-index: 2;
}
.vertical {
position: absolute;
top: 30%;
left: 20%;
height: 40rem;
z-index: 2;
color: black;
border-right: 2px solid black;
background-attachment: fixed;
}
You can do so adding an event listener to scroll and set the height of div according to the scroll value, take a look:
const verticalLine = document.getElementById("vertical")
document.addEventListener('scroll', function(e) {
// use division by two to limit the height size
scrollPosition = window.scrollY / 2 ;
// set the current scroll position as the height of div
verticalLine.style.height = `${lastKnownScrollPosition}px`
});
See the example on codepen

How can i use css in image caption?

Actually i want to do same as image
i am trying this css
.av-image-caption-overlay{
bottom: -6em !important;
background-color: black !important;
height: 200px !important;
opacity: 0.5;
left: 0;
filter: alpha(opacity=50) !important;
}
but not work perfectly i am sharing result.
It's not the most elegant nor is it the only way to do it, but this will work.
body {
font-family: sans-serif;
}
.av-image-caption-overlay {
position: absolute;
}
.av-image-caption-overlay img {
max-width: 400px;
}
.av-image-caption-overlay span {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, .5);
background: linear-gradient(0deg, rgba(0,0,0,.75) 25%, rgba(0,0,0,0) 100%);
height: 100px;
left: 0;
right: 0;
color: white;
padding: 24px;
font-size: 20px;
display: flex;
align-items: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="av-image-caption-overlay">
<span>CAPTION</span><img className="text-image-list-image" src="https://i.stack.imgur.com/xm82O.jpg" alt="" />
</div>
</body>
</html>
Background linear-gradient should do it.
The key thing is create an element inside the div you want to style, give it the following properties, and it should work.
div {
position: relative;
background: url(/* Some image url */); /* Or you could append an 'img' tag into this div like I did in the codepen below */
}
.overlay { /* Or you could use the '::before' pseudo-element of the div here */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(transparent, #000a);
z-index: 999;
}
Here is what I was able to do on Codepen about this https://codepen.io/emekaorji/pen/xxLvQaW

Drawing a line between html div elements

I saw this example in w3schools where you set svg line attributes like x1, y1, x2, y2 and a line appears on screen. I am using same method to draw svg line between div elements using javascript and it doesn't seem to work.
I have two circle from which I read there x and y values using boundingClientRect in javascript and setting it on svg line using set attribute. I want line connecting those two circles
Here is my code
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
But instead of using overflow: visible; you should change the size and/or positioning of the svg.

Javascript: Change Dragging Cursor

I have board element which contains 25 tiles arranged in grid layout. I want it so that the user can drag the tile element, but can not see it being dragged. It's kind of a game. So I managed to remove the ghost image while dragging, but the issue now is the cursor. I am not able to change the dragging cursor to a normal cursor. Here is what the webpage looks like:
Here, is the cursor that is showing while I drag:
Here, is the cursor that I want when I drag (pointer cursor):
Here is my javascript code:
let tileMap =
[
["00","10","20","30","40"],
["01","11","21","31","41"],
["02","12","22","32","42"],
["03","13","23","33","43"],
["04","14","24","34","44"]
]
tileMap.forEach(tileSet => tileSet.forEach(tileID => {
//Creating tile element
let tile = document.createElement('div');
tile.classList.add('tile')
tile.id = tileID;
tile.draggable = true;
//Adding mouse action listeners to the tile element
tile.ondragstart = e => handleDragStart(e);
tile.ondragover = e => handleDragOver(e);
tile.ondragend = e => handleDragEnd(e);
//Adding the tile element to the board
document.querySelector('#board').appendChild(tile);
}))
function handleDragOver(e) {
}
function handleDragStart(e) {
let ghostImage = document.createElement('img');
ghostImage.src = '';
ghostImage.alt = '';
e.dataTransfer.setDragImage(ghostImage, 0, 0);
}
function handleDragEnd(e) {
}
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flow Free (vanilla-version)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="board">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Here's the CSS file:
body {
background-color: darkslategray;
padding: 0; margin: 0;
}
#wrapper {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100vw; height: 100vh;
}
#board {
aspect-ratio: 1/1;
width: 80vmin;
background-color: aliceblue;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
border: 5px solid aliceblue;
}
.tile {
position: relative;
background-color: darkcyan;
border: 2px solid aliceblue;
overflow: hidden;
}
.stamp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: 80%;
border-radius: 50%;
}
.connector-direct {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(90deg);
width: 50%;
height: 100%;
}
.connector-turn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.connector-turn::before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: darkcyan;
width: 25%;
height: 25%;
}
.connector-turn::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 75%;
height: 75%;
border-right: 100vw solid darkcyan;
border-bottom: 100vh solid darkcyan;
}
I have tried couple of things but couldn't come up with an answer. Although, there is an alternative here you can use to get your desired effect. I think it is browser/platform dependent also. So, it is not going to be a generic kind of thing.
From what I have seen on internet, they have given some options to do this. I had tried those things in my system but that doesn't seems to work. There are always some alternatives out there to do same things. As you can see in the above link, they also have implemented the drag and drop feature without using the draggable attribute.
There is also one draggable module in jQuery, you can check that.
P.S. I'm using Linux system, so maybe there also some difference across other OS. That's why I said it won't be a good/generic way.

How to move an image when scrolling?

I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.
So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src = "images/maps.png" alt = "Maps" id="maps">
<img src="images/zug.png" alt= "Zug" id="train">
<h1>Meine Herausforderung</h1>
</body>
</html>
And the css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#maps {
width: 100%;
position: absolute;
}
#train {
position: absolute;
margin-left: 55%;
margin-top: 10%;
width: 3%;
}
Thanks for any help and sorry for my english.
Would be very happy to help you, if you provide more insight about the problem.
From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.
Please check this helps you
const $train = $('#train')
document.addEventListener('scroll', function (event) {
$train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
overscroll: scroll;
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#map-container {
width: 100%;
height: 100vh;
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
background-attachment: fixed;
background-size: cover;
}
#map, .inner-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow:scroll;
}
.inner-container {
background: transparent;
z-index: 2;
}
#train {
width:50px;
height:50px;
top: 20%;
position: absolute;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map-container">
<!-- <img src = "" id="maps"> -->
<div class="inner-container">
<img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
</div>
</div>
<h1>Meine Herausforderung</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Categories

Resources