Develop Reference

Two images change places when hover CSS

I'm looking for an answer to my problem. I have one large image on the top and eight small images on the bottom of my page. I want to make it so when you hover the small image (it's also a link which goes to different place) the large image changes to this small image. So clearly explained, two images change/swap places. And when I unhover the large image changes back.
Here's the picture so you know what I'm talking about!
And I'm looking for CSS, React (if there is any useful components) or just JavaScript-solution (if else statement or something like that).
https://i.ibb.co/C5m5sH3/demonstration.png
Thank you for your time!

You can use jQuery for your case, capture the hover event and update main image source.
$(document).ready(function(){
$('.thumbnail').hover(function(e){
src = $(e.target).data('main');
$("#target_img").attr('src', src);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_image" style="width: 200px; height: 100px">
<img id="target_img" src="#"/>
</div>
<ul>
<li>
<img class="thumbnail" src="https://th.bing.com/th/id/OIP.wx64GmJDu2nd32eO_tieDgHaEK?pid=Api&rs=1" data-main="https://th.bing.com/th/id/OIP.wx64GmJDu2nd32eO_tieDgHaEK?pid=Api&rs=1" width="50px" height="50px"/>
</li>
<li>
<img class="thumbnail" src="https://1.bp.blogspot.com/_138avbqsoJQ/S31zZz9qPZI/AAAAAAAABNQ/ARDHrOa5_pg/s400/Loch_Lomond.JPG" data-main="https://1.bp.blogspot.com/_138avbqsoJQ/S31zZz9qPZI/AAAAAAAABNQ/ARDHrOa5_pg/s400/Loch_Lomond.JPG" width="50px" height="50px"/>
</li>
</ul>

Use mouseover and mouseout event listeners to change the background image of your big div.
The below snippet explains it all -
function change(e){
document.getElementById("main").style.backgroundImage = `url(${e.target.src})`;
}
let imgs = document.getElementsByTagName("img");
for(let i = 0; i<imgs.length; i++){
imgs[i].addEventListener("mouseover", function(){
change(event);
});
imgs[i].addEventListener("mouseout", function(){
document.getElementById("main").style.backgroundImage = `url("https://cdn.pixabay.com/photo/2020/11/28/11/03/advent-5784271__340.jpg")`;
});
}
#main{
height: 150px;
width: 150px;
border: 3px dashed red;
background-image: url("https://cdn.pixabay.com/photo/2020/11/28/11/03/advent-5784271__340.jpg");
}
img{
height: 50px;
width: 50px;
}
<div id="main"></div>
<img src="https://cdn.pixabay.com/photo/2020/03/24/11/21/winter-4963715__340.jpg">
<img src="https://cdn.pixabay.com/photo/2019/12/10/19/15/new-years-eve-4686590__340.jpg">
<img src="https://cdn.pixabay.com/photo/2020/11/17/15/44/cup-5752775__340.jpg">
<img src="https://cdn.pixabay.com/photo/2019/05/18/13/34/branches-4211837__340.jpg">
Currently I don't know what is the structure of your html, but you can tweak this solution to fit your case.

I have created an example of the swap effect that you specified, and created a code pen of it using colors instead:
https://codepen.io/DaudWaqas/pen/xxEgxLm
<section class="main" id="main" style="background-color: #000"></section>
<div>
<Section style="background-color: orange" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: cyan" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: maroon" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: #444" onmouseover="grabAndSwap(event)"></section>
</div>
<div>
<Section style="background-color: #ff0000" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: #00ff00" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: #0000ff" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: magenta" onmouseover="grabAndSwap(event)"></section>
</div>
CSS:
.main {
height: 30vh;
width: 100%;
}
section {
height: 15vh;
width: 25%;
float: left;
}
div {
height: 15vh;
width: 100%;
}
JS:
const main = document.getElementById('main');
function grabAndSwap(event) {
var toSwapWith = event.target;
var mainColor = main.style.backgroundColor;
console.log(mainColor);
var otherColor = toSwapWith.style.backgroundColor;
console.log(otherColor);
main.style.backgroundColor = otherColor;
toSwapWith.style.backgroundColor = mainColor;
}

You can capture mouseover in Javascript and simply swap the background-image and swap back on mouseout.
const picEls= document.getElementsByClassName('small');
const largeEl = document.getElementsByClassName('large')[0];
for (let i=0; i<picEls.length; i++) {
picEls[i].addEventListener('mouseover', hovered);
picEls[i].addEventListener('mouseout', hovered);
}
function hovered(event) {
const bg = event.target.style.backgroundImage;
this.style.backgroundImage = largeEl.style.backgroundImage;
largeEl.style.backgroundImage = bg;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pic {
border-style: solid;
border-radius: 50%;
background-size: cover;
}
.large {
width: 40vw;
height: 30vw;
margin: 0 auto 0 auto;
}
.small {
display: inline-block;
width: 20vw;
height: 15vw;
margin: 2vw;
}
<div class="container">
<div class="large pic" style="background-image: linear-gradient(red,yellow);"></div>
<div class="small pic" style="background-image: linear-gradient(red,green);"></div>
<div class="small pic" style="background-image: linear-gradient(green,blue);"></div>
<div class="small pic" style="background-image: linear-gradient(blue,red);"></div>
<div class="small pic" style="background-image: linear-gradient(cyan,yellow);"></div>
<div class="small pic" style="background-image: linear-gradient(yellow,magenta);"></div>
<div class="small pic" style="background-image: linear-gradient(magenta,cyan);"></div>
<div class="small pic" style="background-image: linear-gradient(cyan,red);"></div>
<div class="small pic" style="background-image: linear-gradient(yellow, green);"></div>
</div>

Pages of my webpage positioned on each other

I am creating a website where the homepage has an automatic image slider, I have this issue where the other pages (service page) overlap and stay right on the home page. I tried fixing this issue setting the homepage to 100vh and the image from the service stays right on top.
I tried removing the absolute positioning on the slider and desc and that disfigured the outlook. I tried forcing the code to work by creating a dummy div and setting a height to push down the service page div and it kinda worked but I want my code as clean as possible, I know someone has a better to deal with this please help out.
I also want the images to be positioned next to each as inline and that is not working.
The three pictures you see on the automatic slider are a separate page and I am trying to set to it below the home page (automatic image slider)
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function(){
if(slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function(){
if(slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
.desc-container {
position: absolute;
bottom: 25%;
left: 23%;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.mySlides {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top:0;
left:0;
opacity: 0;
}
/*----------------------------------------------------
#Home page
-----------------------------------------------------*/
.main{
width:calc(100%- 300px);
}
.homePage {
overflow: auto;
}
.menu {
text-align: center;
}
.slideshow-container {
margin: auto;
}
.fadeIn {
opacity:1;
}
/*----------------------------------------------------
#Service Page
-----------------------------------------------------*/
div .services {
width:100%;
overflow: auto;
}
.column {
float: left;
width: 350px;
height: auto;
overflow-x: hidden;
padding:10px;
margin-left: 300px;
}
.row {
}
.row:after {
content: "";
clear: both;
display: table;
}
<div class="main">
<section id="homePage">
<div class="homePage">
<div class="slideshow-container">
<div class="mySlides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Luxury Events</h6>
<h1 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h1>
<p class="greytxt">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.</p>
</div>
</div>
</div>
<div class="mySlides">
<img src="Images/restaurantbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Creating Impact</h6>
<h1 class="blacktxt"> STRATEGY AND SALES</h1>
<p class="greytxt"></p>
</div>
</div>
</div>
<div class="mySlides">
<img src="Images/memorialbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Lasting Memories</h6>
<h1 class="blacktxt">SERVING WITH LOVE</h1>
<p class="greytxt"></p>
</div>
</div>
</div>
</div>
</div>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</section>
<section>
<div class="services">
<div class="row">
<div class="column">
<img src="Images/eventbg2.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="Images/restaurantbg2.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="Images/memorialbg2.jpg" alt="" style="width:100%">
</div>
</div>
</div>
</section>
</div>

JS: Iterate through divs

I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.

If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>

sticky div in page header overlapping page content

I have a "sticky" div that starts in an absolute position and then switches to fixed at top: 0 once the window begins to scroll (I am using it as a navigation bar), but I also have "in-page" links.
My problem is that the sticky overlaps the other content in the body, in other words the top 200px (the size of the navbar) become hidden (beneath the sticky navbar) as soon as they begin to scroll down.
Is this a CSS problem or a JavaScript problem? How can I fix it?
http://jsfiddle.net/b26g1ztu/
javascript:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
HTML:
<!--navigation with logos-->
<div id="sticky-anchor"></div>
<div id=sticky>
<a href="#lccpost">
<img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg">
</a>
</div>
<!--Articles-->
<!--Nav pics-->
<section>
<div id=lcc1>
<a name="lccpost"><img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg"></a>
</div>
</section>
<!--titles-->
<section>
<div id=submissions><h2>Submissions</h2></div>
<!--single submissions-->
<div class=name>
<h3>John Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Shelby%20Schueller.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
<!---->
<div class=name>
<h3>Jane Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Sarah%20Spohn.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
<!---->
<div class=name>
<h3>Jason Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Jeremy%20Kohn.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
CSS:
body
{
background-color: RGB(95,0,0);
}
#sticky
{
position:absolute;
top:150px;
background-color: RGB(65,0,0);
color:White;
border-style:solid;
border-color:RGB(255,215,0);
padding: 5px;
width: 500px;
height: 150px;
overflow: hidden;
overflow-y: scroll;
}
#sticky.stick {
position: fixed;
top: 0px;
bottom:auto;
z-index: 10000;
}
#lcc1
{
position:absolute;
top: 350px;
left: 20px;
}
#submissions
{
position:absolute;
top: 320px;
left: 240px;
color:White;
}
.name
{
position:relative;
top:400px;
left: 150px;
color:White;
}
.subs
{
display:inline-block;
position:relative;
top: 330px;
left: 270px;
border-style: dashed;
border-color:Red;
padding:5px;
}

I think your problem is a bit JS and a bit CSS.
You're using JS/JQuery to toggle between two CSS classes and essentially toggling between absolute and fixed positioning. Further you are using top to make your decisions in JS, but they evaluate to different values when you are in absolute or fixed positioning.
Finally, i'd recommend that you either (a) just stick with fixed positioning and adjust the location (top/left) onscroll or (b) when you are in .stick mode add padding-top:300px to the body or margin-top:300px on body section:first-child

Horizontal scrolling with sticky div that stays on the left border

I have two rows of data (green) and a header (red), which should be visible at all times:
Check out the example I already have:
http://jsfiddle.net/j9C8R/33/
Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).
How can this be achieved (preferably with only CSS).
UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.
.main {
background-color: blue;
overflow: scroll;
height: 200px;
width: 400px;
}
.row {
height: 50px;
overflow: scroll;
clear: both;
width: 1000px;
background-color: yellow;
}
.sticky,
.content {
float: left;
width: 150px;
border: 1px solid black;
}
.sticky {
background-color: red;
}
.content {
background-color: green;
}
<div class="main">
<div class="row">
<div class="sticky">Sticky header A</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
</div>
<div class="row">
<div class="sticky">Sticky header B</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
</div>
<div class="row">
<div class="sticky">Sticky header C</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
</div>
<div class="row">
<div class="sticky">Sticky header D</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
</div>
<div class="row">
<div class="sticky">Sticky header E</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
</div>
</div>

UPDATE
please note the below is now a little out of date as we have css position sticky
Original Post
I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.
with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:
$('.main').scroll(function() {
$(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
background-color:blue;
overflow:scroll;
height:200px;
width:400px;
}
.row {
height:50px;
overflow:scroll;
clear:both;
width:1000px;
position:relative;
background-color:yellow;
padding-left:150px;
box-sizing:border-box;
}
.sticky, .content {
float:left;
width:150px;
border:1px solid black;
}
.sticky {
background-color:red;
position:absolute; left:0; top:0;
}
.content {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>

Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast
The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)
Demo
CSS
.head {
background-color: #f00;
width: 300px;
position: absolute;
left: 100px;
}
.head table {
width: 100%;
}
.body {
position: relative;
left: 100px;
top: 20px;
width: 300px;
height: 50px;
overflow-y: auto;
}
.body table {
width: 100%;
}
.body td {
width: 100px;
}
.head table td {
width: 100px;
}
.left {
position: absolute;
background-color: #0f0;
width: 90px;
top: 40px;
}