Develop Reference

At a road block with scroll section for my featured items on site

On my site I have a scroll section that will display watches and allow you to scroll on the section similar to what rolex does on their homepage. I created div container for the section and added a wrapper container that I was using to control the items. I also was trying to add arrows that can be used as an option to scroll just like how rolex does on theirs. Nothing is working. The items are there but the functionality isnt. Take a look at Rolex website and scroll down to their watches section on the home page. I want to do exactly that.
I tried adding JavaScript to make it functional but that did nothing for me. I even added a console.log() to see if anything would print in the browser console and got nothing. Please help.
// Select the left and right arrow buttons
const leftButton = document.querySelector('.arrow-button.left');
const rightButton = document.querySelector('.arrow-button.right');
// Select the watch items wrapper element
const watchItemsWrapper = document.querySelector('.watch-items-wrapper');
// Scroll the watch items wrapper element to the left or right when the arrow buttons are clicked
leftButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: watchItemsWrapper.scrollLeft - 200, // Scroll 200 pixels to the left
behavior: 'smooth' // Use a smooth scroll transition
});
});
rightButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: watchItemsWrapper.scrollLeft + 200, // Scroll 200 pixels to the right
behavior: 'smooth' // Use a smooth scroll transition
});
});
/* Watch Reel Section */
.watch-reel-container {
display: flex;
position: relative;
flex-wrap: nowrap;
overflow: scroll;
scroll-behavior: smooth;
margin-left: 230px;
}
.watch-items-wrapper {
display: flex;
flex-wrap: nowrap;
}
.watch-reel-item {
flex: 0 0 200px;
padding: 20px;
cursor: pointer;
}
.watch-reel-container img {
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.watch-name {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #333;
text-transform: uppercase;
}
.watch-reel-h2 {
margin-top: 150px;
margin-left: 250px;
}
.watch-reel-h2 a {
text-decoration: none;
color: #375ea1;
}
.watch-reel-h2 a:hover {
opacity: 70%;
}
.scroll-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background: #ccc;
border-radius: 4px;
}
.arrow-container {
position: absolute;
top: 50%;
transform: translateY(-100%);
display: flex;
justify-content: space-between;
width: 100%;
}
.arrow-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: black;
color: white;
font-size: 20px;
cursor: pointer;
}
.arrow-button::before {
left: 0;
content: '>';
}
.arrow-button.left::before {
right: 0;
content: '<';
}
.arrow-button:hover {
background: #333;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<!-- Beginning of Watch Reel -->
<div class="watch-reel-h2">
<h2>Featured Watches - View all</h2>
</div>
<div class="watch-reel-container">
<div class="watch-items-wrapper">
<div class="watch-reel-item">
<img src="/images/rolex-panda.png" alt="Watch 1">
<p class="watch-name">Rolex Panda</p>
</div>
<div class="watch-reel-item">
<img src="/images/ap-1.png" alt="Watch 2">
<p class="watch-name">AP Royal Oak Offshore</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
</div>
<div class="scroll-bar"></div>
<div class="arrow-container">
<button class="arrow-button left">
<i class="fa fa-arrow-left"></i>
</button>
<button class="arrow-button right">
<i class="fa fa-arrow-right"></i>
</button>
</div>
</div>
<!-- End of Watch Reel -->

Add overflow: scroll to your .watch-items-wrapper:
.watch-items-wrapper {
display: flex;
flex-wrap: nowrap;
overflow: scroll;
}
You can remove the overflow: scroll; from your .watch-reel-container, it's not needed. If you want the container to span full width then add overflow: hidden to your .watch-reel-container.
Next adjust both your scroll functions as such:
Left:
leftButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: -200,
behavior: 'smooth'
});
});
Right:
rightButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: 200,
behavior: 'smooth'
});
});
I think this will give you the functionality you're looking for.
If you'd like to hide the scrollbar but keep the functionality, check our this doc from w3schools.
I hope this helps!

how to auto slide carousel to the first item after it reach the last item?

I have an automatic sliding carousel which is working fine except that when it reach the last image then it just freeze on the last image instead of auto slide to the first image. I just can't remake my javascript code alone. Strange but autosliding to the first image was working a few months ago. I had nothing change to the code but seems after last updates of chrome its just not working correctly neither on pc neither on mobile devices. Here is my javascript code:
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
carousels.forEach((carousel, index)=>{
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn[index].addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn[index].addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
});
});
Here are css and html codes if needed:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>

Jquery to hide button when there are no more images on the right

im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
a = nextImg.addClass('active').css('z-index', 10);
console.log(nextImg.length)
if (!(nextImg.length)) {
next.style.displsy = "none";
}
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
currentImage = $(".active");
if (!currentImg.next().length) {
$(".next").hide;
} else {
$(".next").show();
}
});
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500" class="active" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Some of the problems are:
A spelling mistake in displsy = "none"
Missing parentheses in $(".next").hide
When clicking "next", the "prev" button should appear again (if it was hidden), and vice versa.
You should also avoid code repetition, so create a function that gets as argument whether it should call .next() or .prev() and then do all the common things. Also, .toggle is a nice jQuery function so you can avoid an if..else:
function rotate(direction) {
var currentImg = $('.active');
currentImg.removeClass('active').css('z-index', -10);
currentImg = currentImg[direction]();
currentImg.addClass('active').css('z-index', 10);
$(".next").toggle(currentImg.next().length > 0);
$(".prev").toggle(currentImg.prev().length > 0);
}
$(document).ready(function() {
$('.next').on('click', () => rotate("next"));
$('.prev').on('click', () => rotate("prev"));
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500?text=1" class="active" />
<img src="https://via.placeholder.com/500?text=2" />
<img src="https://via.placeholder.com/500?text=3" />
<img src="https://via.placeholder.com/500?text=4" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

HTML Select item show div and post problem

I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/

You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>

How to have different text in each pop-up

I'm very new to coding and am trying to create a portfolio website.
I have used a pop-up code sourced from W3 Schools.
The idea is that when you click on each small illustration, a full-screen pop-up appears with text. I have been able to do it successfully for one pop-up when you click on the flower.
My problem is, I am now unsure how to do a pop-up for each small illustration with different text.
I have added my code to this post, as well as screenshots of it in the browser to give you a better idea of what it looks like with the illustrations. Website Screenshot Here
Any help would be very much appreciated! I'm very stuck.
/* Open */
function openNav() {
document.getElementById("popup").style.height = "100%";
}
/* Close */
function closeNav() {
document.getElementById("popup").style.height = "0%";
}
/* Universal Styles */
body, html {
width: 100%;
}
body {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
background-color: #9486f2;
font-weight: 300;
font-size: 18px;
}
/* Navigation */
a {
color: white;
text-decoration: none;
font-size: 20px;
}
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
nav {
text-align: right;
padding-top: 30px;
padding-right: 50px;
float: right;
}
nav div {
padding: 5px 0;
}
/* Logo */
header img {
height: 80px;
padding-left: 50px;
padding-top: 50px;
}
/* Heart & Icons */
.container .rowtop {
text-align: center;
}
#flower {
position: relative;
right: 120px;
cursor: pointer;
height: 100px;
}
#adobe {
position: relative;
left: 190px;
}
.container .rowmiddle {
text-align: center;
}
#code {
position: relative;
bottom: 370px;
right: 30px;
}
#heart {
position: relative;
bottom: 60px;
}
#pudding {
position: relative;
bottom: 330px;
left: 50px;
}
.container .rowbottom {
text-align: center;
}
#certificate {
position: relative;
bottom: 210px;
right: 120px;
}
#tv {
position: relative;
bottom: 200px;
left: 190px;
}
/* Pop-Ups */
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
opacity: 0.95;
background-color: #cc90ec; /* Black w/opacity */
overflow-y: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 40%; /* 100% width */
text-align: left; /* Centered text/links */
margin-top: 50px;
font-size: 30px;
line-height: 46px;
margin: 0 auto;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color:#adff2f;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Wavy Text */
.wavy
{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(
transparent, rgba(0,0,0,0.2));
}
.wavy span
{
position: relative;
display: inline-block;
color: #adff2f;
font-weight: 400;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
#keyframes animate
{
0%
{
transform: translateY(0px);
}
10%
{
transform: translateY(-20px);
}
30%,100%
{
transform: translateY(0px);
}
}
/* Footer */
h5 {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
font-weight: 200;
font-size: 14px;
}
footer {
padding-left: 50px;
position: relative;
bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dom Pooley</title>
<script src="main.js" ></script>
<link rel="stylesheet" href="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/css/style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght#0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<!-- Header -->
<body>
<header class="flex-container">
<img src="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/images/DomPooley_Logo_01.png"">
<nav>
<div>About</div>
<div>Work</div>
<div>Contact</div>
</nav>
</header>
<!-- Heart and Icons -->
<div class="container">
<div class="rowtop">
<img id="flower" src="resources/images/Pansy_01.png" onmouseover="this.src='resources/images/Pansy_02.png' " onmouseout="this.src='resources/images/Pansy_01.png'" onClick="openNav()">
<img src="resources/images/Adobe_01.gif" id="adobe" alt="" height="120">
</div>
<div class="rowmiddle">
<img src="resources/images/Code_01.gif" onmouseover="this.src='resources/images/Code_02.png' " onmouseout="this.src='resources/images/Code_01.gif'" id="code" alt="" height="40">
<img id="heart" height="500" src="resources/images/Dom_Heart_01.png" onmouseover="this.src='resources/images/Dom_Heart_02.png' " onmouseout="this.src='resources/images/Dom_Heart_01.png'"/>
<img src="resources/images/Pudding_01.gif" id="pudding" alt="" height="120">
</div>
<div class="rowbottom">
<img src="resources/images/Certificate_01.gif" id="certificate" alt="" height="100">
<img src="resources/images/TV_01.gif" id="tv" alt="" height="110">
</div>
</div>
<!-- Pop-Ups -->
<!-- The Overlay -->
<div id="popup" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div id="flowerpop" class="overlay-content">
<p>Thanks to COVID-19, I now have a new hobby -I have been growing, picking, pressing and coating flowers in resin to make jewellery. I would include a photo but they still have that "primary school project vibe"...
<br><div class="wavy">
<span style="--i:1;">*</span>
<span style="--i:2;">W</span>
<span style="--i:3;">a</span>
<span style="--i:4;">t</span>
<span style="--i:5;">c</span>
<span style="--i:6;">h</span>
<span style="--i:7;"> </span>
<span style="--i:8;">t</span>
<span style="--i:9;">h</span>
<span style="--i:10;">i</span>
<span style="--i:11;">s</span>
<span style="--i:12;"> </span>
<span style="--i:13;">s</span>
<span style="--i:14;">p</span>
<span style="--i:15;">a</span>
<span style="--i:16;">c</span>
<span style="--i:17;">e</span>
<span style="--i:18;">*</span>
</div></br></p>
</div>
</div>
<!-- Footer Section -->
<footer>
<h5>Copyright Dominique Pooley 2020</h5>
</footer>
</body>
</html>

You have to make a small change in css.
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
You have to remove letter-spacing: 5px; from css file.
then code looks like :
a:hover {
color:#adff2f;
font-weight: 400;
}

based on what you've mentioned, it sounds like you're trying to have a generic pop-up/modal as a HTML element and then when you click on different illustrations it will open the modal and the modal would contain some text related to that illustration that you clicked on.
What you want to do, is keep your modal, which appears to be the #popup element, add an onclick to each illustration that runs a function which dynamically injects some text by targetting the heading where you need the text to be, for example:
toggleModal (title, subtitle) {
const headingEl = document.querySelector('[data-your-heading]')
const subtitleEl = document.querySelector('[data-your-subtitle]')
headingEl.innerText = title
subtitleEl.innerText = subtitle
// run some code to hide/show the modal below here
}
Next, attach the data-your-* attributes to whichever tag you want to update text with, for instance a <p> tag within your generic HTML modal/pop-up.
And then on each of your illustrations, you add an onclick function and pass the arguments of what text you want, for example:
<button type="button" onclick="toggleModal('My Title', 'My Subtitle')">Show Illustration 1</button>