Develop Reference

Is there a way to make a CSS animation occur again on the click of another DIV?

Basically, I am trying to create an animation for CSS to fade into a slideshow of pictures on the click of a button (flute DIV top left). On the first click of the DIV the animation does play, but any other click after that does not load the animation (it does not fade). Is there a way to replay the animation once it is called for again (flute DIV clicked again)? Also don't mind the DIV slide's random placement still creating them lol. Here is my current code:
*Notice how the animation for the slideshow plays the first time, but any other time after it does not.
let slideIndex = 1;
//showSlides(slideIndex);
// Next/previous controls n = number selected in arrows
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(nu) {
showSlides(slideIndex = nu);
}
function hide(newScale){
//newScale
var x = document.getElementById("x"),
image1 = document.getElementById("image1"),
image2 = document.getElementById("image2"),
image3 = document.getElementById("image3"),
imagew = document.getElementById("imagew")
contentw = document.getElementById("contentw");
document.getElementById('image1').style.WebkitTransition = 'opacity 1s';
contentw.style.zIndex = "111111111111111111111112";
imagew.style.zIndex = "111111111111111111111112";
image1.style.transform = `scale(${newScale})`;
image2.style.transform = `scale(${newScale})`;
image3.style.transform = `scale(${newScale})`;
x.style.transform = `scale(${newScale})`;
}
function changeScale(newScale){
var div1 = document.getElementById("dot1");
var div2 = document.getElementById("dot2");
var div3 = document.getElementById("dot3");
var x = document.getElementById("x");
var image1 = document.getElementById("image1"),
image2 = document.getElementById("image2"),
image3 = document.getElementById("image3");
image1.style.transform = `scale(${newScale})`;
image2.style.transform = `scale(${newScale})`;
image3.style.transform = `scale(${newScale})`;
var prev = document.getElementById("p");
var next = document.getElementById("n");
// div1.style.transform = div1.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
// div2.style.transform = div2.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
// div3.style.transform = div3.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
div1.style.transform = `scale(${newScale})`;
div2.style.transform = `scale(${newScale})`;
div3.style.transform = `scale(${newScale})`;
div1.style.zIndex = "99999999999999";
contentw.style.zIndex = "-1";
imagew.style.zIndex = "-1";
prev.style.transform = `scale(${newScale})`;
next.style.transform = `scale(${newScale})`;
x.style.transform = `scale(${newScale})`;
}
function showSlides(n) {
//makes i variable, gets slides and dots on slideshow
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
//n = number inputted/selected
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
.h2{
font-family: 'Roboto', serif;
}
body {
background-color: #000000;
}
.wrapper {
display: flex;
flex-direction: column;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 3rem;
/*box-shadow: 0.6rem 0.6rem 1.9rem #525c5c, -0.5em -0.5em 1em #ffffff;*/
z-index: 100;
transition-duration: 0.1s; /* ADD */
}
.wrapper:hover {
text-shadow: 5px 5px 4px lightgray;
cursor: pointer;
transition-duration: 0.2s;
}
.wrapper .image {
overflow: hidden; /* ADD */
border-radius: 1rem; /* ADD */
}
.wrapper .image img {
width: 100%;
object-fit: cover;
border-radius: 1rem; /*REMOVE */
cursor: pointer;
transition: transform 0.5s; /* ADD */
}
.wrapper:hover img { /* change scale? */
transform: scale(1.5);
}
.wrapper .infocontent {
display: flex;
justify-content: center;
align-items: center;
text-shadow: .5px 2px 10px rgba(214, 205, 205, 0.616);
font-weight: bold;
font-family: Consolas;
letter-spacing: 2px;
color: #441d9e;
cursor: pointer;
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
/* display: none;
width: 100%;
height: 100%; */
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1111111;
display: none;
}
#x{
cursor: pointer;
transform: scale(0);
position: absolute;
right: -25vh;
top: -56vh;
font-size: 4vh;
background:rgba(39, 58, 29, 0.596);
border-radius: 50%;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center; width:40px;
height:40px;
z-index: 1111111;
}
#x:hover{
background:rgba(86, 163, 44, 0.596)
}
#x:active{
background:rgba(189, 1, 1, 0.596);
/* border:rgba(86, 163, 44, 0.596) 100px; */
border: 100px;
/*border-width: 105px;*/
border:1px solid red;
}
#p, #n{
transform: scale(0);
}
/* Next & previous buttons */
.prev, .next {
z-index: 1111111;
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover{
background-color: rgba(53, 49, 49, 0.37);
}
.next:hover {
background-color: rgba(53, 49, 49, 0.37);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
top: 90vh;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: rgb(255, 255, 255);
border-radius: 50%;
display: inline-block;
transition: background-color 0.3s ease, box-shadow 0.4s ease;
}
#dot1{
position:fixed;
left: 103vh;
z-index: 1111111;
transform: scale(0);
}
#dot2{
position:fixed;
left: 107vh;
z-index: 1111111;
transform: scale(0);
}
#dot3{
position:fixed;
left: 111vh;
z-index: 1111111;
transform: scale(0);
}
.dot:hover {
box-shadow: 0.3rem 0.3rem 5rem #525c5c, 0em 0em 0.9em #ffffff98;
background-color: #807b7b;
}
.active{
background-color: #272727;
box-shadow: 0.3rem 0.3rem 5rem #525c5c, 0em 0em 0.45em #ffffff;
}
/* .hide{
} */
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
/* animation-iteration-count: infinite; */
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fadeOut{
from {opacity: 1}
to {opacity: 0}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Flute</title>
<!-- <link rel = "icon" href = "images/apple.png" type = "image/x-icon"> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<script src="p5.play.js"></script>
<script src="const.js"></script>
<h1 class = "h2">Flute</h1>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto">
<div class="wrapper" >
<div class="image" id = "imagew">
<img src="https://static01.nyt.com/images/2021/02/06/lens/06xp-flute1/06xp-flute1-jumbo-v2.jpg?quality=75&auto=webp"
title = "Golden Flute Background (possibly article?)" onclick = "currentSlide(1); changeScale(1); ">
</div>
<div class="infocontent" id = "contentw">
<h3><strong>Golden Flute</strong></h3>
</div>
</div>
<!-- Slideshow container -->
<div class="slideshow-container" >
<!-- Full-width images with number and caption text -->
<div class="mySlides fade" >
<div class="numbertext" id = "caption1">1 / 3</div>
<img id ="image1" src="https://static01.nyt.com/images/2021/02/06/lens/06xp-flute1/06xp-flute1-jumbo-v2.jpg?quality=75&auto=webp" style="width:100%">
<div class="text" id = "text1">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext" id = "caption2">2 / 3</div>
<img id ="image2" src="https://images.ctfassets.net/cnu0m8re1exe/1VrluBtdwQy4uTrLEhqZGM/182f5254239d5a93dc442793a633acbd/Crystal_Flute.jpg?fm=jpg&fl=progressive&w=660&h=433&fit=fill" style="width:100%">
<div class="text" id = "textq">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext" id = "caption2">3 / 3</div>
<img id ="image3" src="https://ventured.com/wp-content/uploads/2020/10/William-Kincaids-Verne-Q.-Powell-Flute-768x576.jpg" style="width:100%">
<div class="text" id = "text3">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" id = "x" onclick="hide(0);">✕</a>
<!-- onclick="plusSlides(-1)" -->
<a class="prev" id = "p" onclick="plusSlides(-1)">❮</a>
<a class="next" id = "n" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center" >
<span class="dot" onclick="currentSlide(1)" id = "dot1"></span>
<span class="dot" onclick="currentSlide(2)" id = "dot2"></span>
<span class="dot" onclick="currentSlide(3)" id = "dot3"></span>
</div>

How to fit elements at slider container

I work with statick creation elements, and for this i need to have slider.
I just create slider, but elements are not fit in to slider container.
Example:
var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"
function createUserCard() {
htmlElements = `<div class="user-card">
<img src="https://source.unsplash.com/user/erondu" class="userImage" />
<div class="info">
<div class="name">${userName}</div>
<div class="handle">
<div class="idPersone">${id}</div>
</div>
</div>
</div>`
$('.cardsCreation').append(htmlElements);
}
$('#plus-button').on('click', function () {
createUserCard();
});
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
.user-card, userImage {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}
.user-card {
margin: 12px;
padding: 10px 10px 10px 10px;
border-radius: 12px;
width: 160px;
text-align: center;
float: left;
background-color: #fff;
}
.userImage {
border-radius: 50%;
height: 140px;
width: 140px;
border: 5px solid #eee;
}
.name {
font-size: 20px;
margin: 5px;
font-weight: bold;
}
.progress {
color: #25af53;
font-size: 48px;
}
#plus-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #428bca;
position: absolute;
top: 33%;
margin-left: 20px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
border: none;
outline: none;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
#plus-button:hover {
box-shadow: 0 6px 14px 0 #666;
transform: scale(1.05);
}
.wrapper {
position: relative;
}
.arrow {
cursor: pointer;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 50%;
margin-top: 160px;
}
#left-arrow {
border-width: 50px 40px 50px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 25px;
}
#right-arrow {
border-width: 50px 0 50px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 25px;
}
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vertical-align-wrapper {
display: table;
overflow: hidden;
text-align: center;
}
.vertical-align-wrapper span {
display: table-cell;
vertical-align: middle;
font-size: 5rem;
color: #ffffff;
}
#media only screen and (max-width : 992px) {
.vertical-align-wrapper span {
font-size: 2.5rem;
}
#left-arrow {
border-width: 30px 20px 30px 0;
margin-left: 15px;
}
#right-arrow {
border-width: 30px 0 30px 20px;
margin-right: 15px;
}
.arrow {
margin-top: -30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="left-arrow" class="arrow"></div>
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="cardsCreation"></div>
<button id="plus-button">
<p class="plus">+</p>
</button>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<span>Slide 2</span>
</div>
</div>
<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>
</div>
<div id="right-arrow" class="arrow"></div>
</div>
So as u can see affter tapping "+" i add new ellement in to html.
And from two sides i have arrows which are changing slider.
After tapping arrows go down, and this is not good.
And after i will reach limit of adding element in one slider it's add new element to new slider page.
What i want ex:

If you are using toggle of display CSS property that happened because it remove whole element from the DOM so, I suggest you to use visibility or opacity properties to done your task.

JQuery UI Tabs - Custom animation

I need to create animation like this - CODEPEN
Using JQuery UI Tabs - jQuery UI Tabs
Problem occur when I need to create animation for container. There is only show/hide option and don't support fx option in newest version. How I can accomplish it?
Main question: can somebody provide codepen/fiddle with custom function animation (so everybody will benefit) like function inside show/hide method? It is possible?.
$(document).ready(function() {
// Variables
var clickedTab = $(".tabs > .active");
var tabWrapper = $(".tab__content");
var activeTab = tabWrapper.find(".active");
var activeTabHeight = activeTab.outerHeight();
// Show tab on page load
activeTab.show();
// Set height of wrapper on page load
tabWrapper.height(activeTabHeight);
$(".tabs > li").on("click", function() {
// Remove class from active tab
$(".tabs > li").removeClass("active");
// Add class active to clicked tab
$(this).addClass("active");
// Update clickedTab variable
clickedTab = $(".tabs .active");
// fade out active tab
activeTab.fadeOut(250, function() {
// Remove active class all tabs
$(".tab__content > li").removeClass("active");
// Get index of clicked tab
var clickedTabIndex = clickedTab.index();
// Add class active to corresponding tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active");
// update new active tab
activeTab = $(".tab__content > .active");
// Update variable
activeTabHeight = activeTab.outerHeight();
// Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function() {
// Fade in active tab
activeTab.delay(50).fadeIn(250);
});
});
});
// Variables
var colorButton = $(".colors li");
colorButton.on("click", function() {
// Remove class from currently active button
$(".colors > li").removeClass("active-color");
// Add class active to clicked button
$(this).addClass("active-color");
// Get background color of clicked
var newColor = $(this).attr("data-color");
// Change background of everything with class .bg-color
$(".bg-color").css("background-color", newColor);
// Change color of everything with class .text-color
$(".text-color").css("color", newColor);
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
color: #50555a;
}
.main{
padding: 100px 20px;
}
nav {
z-index: 9;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
text-align: center;
}
.bg-color {
background-color: #46a1de;
transition-duration: .5s;
}
.text-color {
color: #46a1de;
transition-duration: .5s;
}
footer {
padding: 40px 0;
text-align: center;
opacity: .33;
color: white;
}
.wrapper {
min-width: 600px;
max-width: 900px;
margin: 0 auto;
}
.tabs {
display: table;
table-layout: fixed;
width: 100%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
.tabs > li {
transition-duration: .25s;
display: table-cell;
list-style: none;
text-align: center;
padding: 20px 20px 25px 20px;
position: relative;
overflow: hidden;
cursor: pointer;
color: white;
}
.tabs > li:before {
z-index: -1;
position: absolute;
content: "";
width: 100%;
height: 120%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition-duration: .25s;
border-radius: 5px 5px 0 0;
}
.tabs > li:hover:before {
-webkit-transform: translateY(70%);
transform: translateY(70%);
}
.tabs > li.active {
color: #50555a;
}
.tabs > li.active:before {
transition-duration: .5s;
background-color: white;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tab__content {
background-color: white;
position: relative;
width: 100%;
border-radius: 5px;
}
.tab__content > li {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
list-style: none;
}
.tab__content > li .content__wrapper {
text-align: center;
border-radius: 5px;
width: 100%;
padding: 45px 40px 40px 40px;
background-color: white;
}
.content__wrapper h2 {
width: 100%;
text-align: center;
padding-bottom: 20px;
font-weight: 300;
}
.content__wrapper img {
width: 100%;
height: auto;
border-radius: 5px;
}
.colors {
text-align: center;
padding-top: 20px;
}
.colors > li {
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
border-bottom: 5px solid rgba(0, 0, 0, 0.1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
transition-duration: .2s;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors > li:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
border-bottom: 10px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors > li.active-color {
-webkit-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
border-bottom: 20px solid rgba(0, 0, 0, 0.15);
}
.colors > li:nth-child(1) {
background-color: #2ecc71;
}
.colors > li:nth-child(2) {
background-color: #D64A4B;
}
.colors > li:nth-child(3) {
background-color: #8e44ad;
}
.colors > li:nth-child(4) {
background-color: #46a1de;
}
.colors > li:nth-child(5) {
background-color: #bdc3c7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="bg-color main">
<nav class="bg-color">Adaptive tabs</nav>
<section class="wrapper">
<ul class="tabs">
<li class="active">Colors</li>
<li>Favorite movies</li>
<li>About</li>
</ul>
<ul class="tab__content">
<li class="active">
<div class="content__wrapper">
<h2 class="text-color">Pick a color</h2>
<ul class="colors">
<li data-color="#2ecc71"></li>
<li data-color="#D64A4B"></li>
<li data-color="#8e44ad"></li>
<li class="active-color" data-color="#46a1de"></li>
<li data-color="#bdc3c7"></li>
</ul>
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">Her</h2>
<img src="http://lewihussey.com/codepen-img/her.jpg">
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">About</h2>
<p>Created by <a class="text-color" href="http://lewihussey.com" target="_blank">Lewi Hussey</a>
</p>
</div>
</li>
</ul>
</section>
<footer>By Lewi Hussey</footer>
</div>

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.

How to stop/start looping sliders when mouse over the element?

Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>

See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>