Jquery/CSS carousel/slider effect on div - javascript

I have set up 3 divs, one on the left and two on the right on top of each other.
I want the 'onclick' to make the div on the left slide out from the left
and one of divs on the right-top to go up and the one on the right-bottom to slide in from the right.
After that animations are finished I want the next time I press the 'onclick' button to do the same to the next divs (with different content) to come in from the points the previous divs came.
I've managed to change the background color of the div's but not the content and animations.
This is what I've gotten so far.
$(document).ready(function(){
$('#next').click(function(){
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function(){
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});
html,body,section{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,#prev{
position:fixed;
z-index:101;
}
#next{
right:0px;
}
#prev{
left:0px;
}
#t1{
float:left;
height:100%;
width:43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1{
color: white;
}
#logo >h3{
width: 58%;
margin: 0 auto;
}
#t2,#t3{
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3{
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2{
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img{
margin-top: 11%;
}
#logo{
margin-top: 40%;
}
#t3>ul{
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li{
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img{
width: 53%;
margin-top: 25%;
}
#home{
display: none !important;
}
#circle1,#circle2,#circle3{
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1{
background: #32325f;
}
#circle2{
background: white;
}
#circle3{
background: #ef9d34;
}
.active{
display:initial !important;
z-index:100;
}
#case{
display:none;
position:absolute;
top:0px;
height: 100%;
width: 100%;
z-index:99;
}
.stern1{
background:blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>
<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>


have a look at this simple tutorial, its worked fine for me and you can add / improve it as well.
simple javascript slideshow

Related

web page displaying incorrectly on other devices

I have a little problem where my web page is displaying fine on my pc screen but when i go live on my laptop or mobile phone the layout is all messed up. Does anyone know how i can fix this? Its is completely ruined in other screens and is not user friendly, but on my main computer where i was using to preview and create my website, it is basically ready.
/*PLAYER PAGE*/
.container {
padding: 40px 20px 0;
max-width: 2000px;
margin: 0 auto;
border-bottom: 2px solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 20px;
}
h1 {
margin: 0;
text-align: center;
font-size: 50px;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
padding: 40px;
}
.luxxreno {
text-align: left;
position: relative;
left: 400px;
padding-top: 80px;
bottom: 150px;
}
.luxxreno img {
border-radius: 50%;
width: 600px;
padding-bottom: 10px;
position: relative;
top: 80px;
}
.meet-the-owner {
padding: 50px;
border-top: 2px solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 300px;
bottom: 10px;
font-size: 21px;
}
.questions p {
padding: 10px;
position: relative;
top: 30px;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 35px;
position: relative;
left: 12px;
font-size: 50px;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 12px;
color: red;
}
.luxx-socials {
position: relative;
left: 9px;
top: 50px;
}
.luxx-socials ul li {
padding: 10px 30px;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<head>
<!--
<script>
ScrollReveal({
reset: true
});
</script>
-->
<script src="https://unpkg.com/scrollreveal"></script>
<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>Players | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Honestly don’t want a super power just wanna be Iron Man.</b></p>
<p>Favourite Artist of All Time: <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>&copy 2021 LuxxMob</h4>
<h4>Made with &#10084 by #truechow</h4>
</div>
</footer>
<!--
<script>
ScrollReveal().reveal('footer', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.luxxreno', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.header');
</script>
<script>
ScrollReveal(options);
</script>
-->
</body>

This is likely because your webpage is not responsive. An easy fix is to always use percentages instead of specific pixels to position items.
eg top: 5% instead of top: 15px

I think it's because you have to use media queries to make your website responsive on all devices.
Check it out here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Another tip is not to use only pixels as a unit of measurement, also use 'em', 'rem', vw (for the font) and '%'
Check it out here too:
https://www.w3schools.com/cssref/css_units.asp

There's a couple of random things in your css that I don't know why they're there. max-width: 2000px, why is this 2000 pixels, it would be way too much for most phones and screens (perhaps there's a reason like the player map being large, I dunno). overflow: hidden, why is there an overflow on a h1 tag. border-width: 100%, why are you setting border widths to 100%. margin: 0 auto why is there a margin auto on a 2000px wide container, it'll never be the center of anything. position: relative, why is everything relative. There's a bunch of random CSS that I don't know what it's doing or why it's there (it shouldn't be).
Along with that you shouldn't ever use pixels for fonts, it won't scale on a mobile phone so your text (and containers containing text) will get messed up. Use font-size: 100% on the html container and then use font-size: 1rem // or 1.2 or 1.4 on anything else so you scale everything according to root.
Along with that you've used pixels everywhere to define borders/tops/alignment, which will almost never work out (unless you're just lucky). You should be using flex for page layout and pixels if you want to define specific containers. You've not shown body and the main page CSS but from container I can see you've not used that. You should have:
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
Or something similar for your page layout. You don't need any #media stuff for that because flex will work correctly across all devices.

Second div does not show on mouseover

I have a problem, where I wish to toggle two divs (each in a column of their own), when a mouse covers over an element on page.
At this point only div (.text_2) reacts when .item-2 is hovered, but I also need text.2.2 to react, and appear (this div is placed in the next column).
I have tried a couple of different things in order to make this work. for example this
$('.item-2').hover(function() {
$('.text_2').toggleClass('hide_default');
}, function(){
$('.button-rounded').toggleClass('hide_default') {
$('.text_2.2').toggleClass('hide_default');
});
});
Here's my code so far
$(".item-1").hover(function(){
$('#text_1').toggleClass('hide_default');
}, function(){
$('#text_1').toggleClass('hide_default');
});
$(".item-2").hover(function(){
$('.text_2').toggleClass('hide_default');
}, function(){
$('.text_2').toggleClass('hide_default');
});
/* Body */
* {
margin: auto;
padding: o;
}
html, body {
margin:0;
padding:0;
}
/* Header */
#main{
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
/* Contacts */
#contact{
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About{
margin: 50px;
}
/* Slider */
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white; color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
overflow: hidden;
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
/* New slider */
#container_1{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Sofia Bordoni</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="contact">
<div class="item item-1">
Sofia Bordoni
sofiabordoni#gmail.com
0045 9164 6938
About
</div>
</div>
<div id="container_1">
<div class="item" data-target="#text_2">
<img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px">
</div>
<div class="item" data-target="#text_3">
<img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px">
</div>
<div class="item" data-target="#text_4">
<img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px">
</div>
<div class="item" data-target="#text_5">
<img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px">
</div>
<div class="item" data-target="#text_6">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px">
</div>
<div class="item" data-target="#text_7">
<img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px">
</div>
<div class="item" data-target="#text_8">
<img class="Image" src="Images/plakat.png" width="250px">
</div>
<div class="item" data-target="#text_9">
<img class="Image" src="Images/mani-sito_2.png" width="250px">
</div>
<div class="item" data-target="#text_10">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px">
</div>
<div class="item" data-target="#text_11">
<img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px">
</div>
<div class="item" data-target="#text_12" >
<img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px">
</div>
<div class="item" data-target="#text_13" >
<img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px">
</div>
<div class="item" data-target="#text_14" >
<img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px">
</div>
<div class="item" data-target="#text_15" >
<img class="Image" src="Images/Betafactory.gif" width="450px">
</div>
<div class="item" data-target="#text_16" >
<img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px">
</div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br>
Candle
</p>
</div>
<div class="nav-item column column-3">
</div>
<div class="nav-item column column-3">
</div>
</div>
<script src="Onhover.js"></script>
<script src="HoverColor.js"></script>
</body>
</html>

You've already got the structure in the HTML from the previous answer I provided to use the data-target to genericise the logic and keep it DRY.
As such you just need to amend the selector in the data-target to match both the #text_2 and #text_2.2 element. Note that the . in the latter selector will need to be escaped so that it's not interpreted as a class selector.
$(".item").hover(function() {
$(this.dataset.target.replace('.', '\\.')).toggleClass('hide_default');
});
* {
margin: auto;
padding: o;
}
html,
body {
margin: 0;
padding: 0;
}
#main {
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
#contact {
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About {
margin: 50px;
}
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white;
color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
/* overflow: hidden; */
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
#container_1 {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="contact">
<div class="item item-1" data-target="#text_1">
Sofia Bordoni sofiabordoni#gmail.com 0045 9164 6938
About
</div>
</div>
<div id="container_1">
<!-- note additional id selector in data-target here -->
<div class="item" data-target="#text_2, #text_2.2"><img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px"></div>
<div class="item" data-target="#text_3"><img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px"></div>
<div class="item" data-target="#text_4"><img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px"></div>
<div class="item" data-target="#text_5"><img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px"></div>
<div class="item" data-target="#text_6"><img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px"></div>
<div class="item" data-target="#text_7"><img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px"></div>
<div class="item" data-target="#text_8"><img class="Image" src="Images/plakat.png" width="250px"></div>
<div class="item" data-target="#text_9"><img class="Image" src="Images/mani-sito_2.png" width="250px"></div>
<div class="item" data-target="#text_10"><img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px"></div>
<div class="item" data-target="#text_11"><img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px"></div>
<div class="item" data-target="#text_12"><img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px"></div>
<div class="item" data-target="#text_13"><img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px"></div>
<div class="item" data-target="#text_14"><img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px"></div>
<div class="item" data-target="#text_15"><img class="Image" src="Images/Betafactory.gif" width="450px"></div>
<div class="item" data-target="#text_16"><img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px"></div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material
combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
<div class="nav-item column column-3"></div>
<div class="nav-item column column-3"></div>
</div>
A better approach would be to remove the . in the id attribute completely, as it avoids confusion with class selectors. Then the JS can be made even more simple:
<div class="nav-item column column-2">
<p class="hide_default" id="text_2_2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
$(".item").hover(function() {
$(this.dataset.target).toggleClass('hide_default');
});

How can i slidetoggle to the left?

I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}

slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>

How to scroll up a div when hovering over another element

I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?
.snapcode-footer {
position: absolute;
padding-top: 20px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
<div class="snapcode-footer">
<img src="https://wumbo.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #wumbo"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #wumbo"/></li>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #wumbo"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #wumbo"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.wumbo.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
<div/>
</div>
</div>

I'm re-positioned your div.snapcode footer and applied a css property to
#snapchat:hover ~ .snapcode-footer . hopes this will help you :)
.snapcode-footer {
position: absolute;
padding-top: 90px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
#snapchat:hover ~ .snapcode-footer{
z-index:999;
color:green;
position:relative;
margin-bottom:100px;
margin-left:50px;
}
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #hullandspar"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
<div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #hullandspar"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #hullandspar"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
</div>
</div>
</div>

I'd suggest giving snapcode-footer an id to make it easier to control.
<div class="snapcode-footer" id="snapcode">
<script>
var hover = 0;
</script>
Then you make a script on #snapchat
<li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place
<script>
setInterval("if(hover == 1){snapcode.top--}");
setInterval("if(hover == 0){snapcode.top = 0}");
</script>

How to make an image in a separate div change on hover of nav?

I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout

Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.

try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/

.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/

Categories