We Keep Coding

Flip box on button click

The below codes defines boxes that flips when any area of the box is touched or clicked but I would rather this function was specific to a button instead so that instead of clicking on any area of the box to achieve a flip, a button is used instead. How can I tweak this code to achieve this.
I want the button within these divs to be responsible for the flip function rather than having to click on any area of the box and I would equally like to achieve this possibility in all cases.
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
})
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #333;
color: white;
transform: rotateY(180deg);
}
.card.is-flipped {
transform: rotateY(180deg);
}
<div class="flip-box">
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
<br/>
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
</div>

Assuming that all the button tags are "click to flip" and:
cards = someRoot.querySelectorAll(".card");
you can modify the code to:
cards.forEach(card => {
// For each card
card.querySelectorAll("div > button").forEach(btn => {
// For each button on the card sides
btn.addEventListener("click", ev => {
// Toggle the "is-flipped" class
ev.target.parentElement.parentElement.classList.toggle("is-flipped");
});
});
});
Full demo:
// Get all cards
var cards = document.querySelectorAll(".card");
cards.forEach(card => {
// For each card
card.querySelectorAll("div > button").forEach(btn => {
// For each button on the card sides
btn.addEventListener("click", ev => {
// Toggle the "is-flipped" class of the button parent's parent
ev.target.parentElement.parentElement.classList.toggle("is-flipped");
});
});
});
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #333;
color: white;
transform: rotateY(180deg);
}
.card.is-flipped {
transform: rotateY(180deg);
}
<div class="flip-box">
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
<br/>
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
</div>

Recreating aniamtion / side scroll slideshow

I'm trying to recreate a animation / side scroll effect. The effect is from https://elrond.com/#partners and its located in the partner section. The slow moving circles. I tried to recreate it, but after slamming my head against mine desk for the duration of the weekend I couldn't recreate it. So here I'm asking for some help.
I made a little code pen to show where I'm at now.
.slide-wrapper{
max-width: 800px;
height: 30vh;
position: relative;
margin: 0 auto;
transform: translate3d(0,0,0);
outline: red;
}
.slider{
position: absolute;
top: 0;
left: 0;
height: 200px;
display:flex;
transform: translate3d(0,0,0);
animation: scroll 15s infinite linear;
}
.slider:last-child .slide{
background-color: steelblue;
animation: scroll 13s infinite linear;
margin-top: 5rem;
}
.slide{
background-color:orangered;
height:50px;
width:50px;
margin: 1rem 6rem;
}
#keyframes scroll {
100%{transform: translateX(-66.6666%)}
}
https://codepen.io/tijmenjacobs/pen/LYxrvKq
My main questions are the following:
How can I loop the animation? Now when the animation is done it teleports back to its original position and restarts.
I was wondering how to position the circles. Should I handle JS to random assign the circles or should I hard code the location? Like they seem to do on the original.
Hope you guys could help!
Thanks in advance!

To get the desired effect you need two of the same sliders next to eachother (slider-main and slider-copy in the snippet).
I used CSS variables to make it easier to calculate offsets and whitespace. The offset between the slides is based on the amount per row (--slides-per-row). These are set within the HTML so you can easily reuse the slider somewhere else.
/* Basic reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body > * + * {
margin-top: 2em;
}
/* Slider styling */
.sliders {
display: flex;
}
.slider {
--slide-offset: calc(100vw / var(--slides-per-row, 4)); /* --slides-per-row is set via HTML and uses 4 if nothing is provided */
--slide-size: 5rem;
flex: 0 0 100vw;
animation: scroll 10s linear infinite;
}
.slider-row {
display: flex;
}
/* Offset every odd row */
.slider-row:nth-child(2n+1) {
transform: translateX(
calc((var(--slide-offset) / 2 + var(--slide-size) / 2) * -1)
);
margin-bottom: 2rem;
}
.slide {
width: var(--slide-size);
height: var(--slide-size);
margin: 0 0 0 var(--slide-offset);
background: steelblue;
font-size: 2rem;
color: white;
/* Center content */
display: flex;
align-items: center;
justify-content: center;
}
#keyframes scroll {
100% {
transform: translateX(-100%);
}
}
<h2>4 slides per row</h2>
<div class='sliders' style='--slides-per-row: 4'>
<div class='slider slider-main'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
<div class='slider slider-copy'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
</div>
<h2>2 slides per row</h2>
<div class='sliders' style='--slides-per-row: 2'>
<div class='slider slider-main'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
</div>
<div class='slider-row'>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
</div>
<div class='slider-row'>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
<div class='slider slider-copy'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
</div>
<div class='slider-row'>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
</div>
<div class='slider-row'>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
</div>

How to show information in the back of an image?

I'm trying to create an application that lets the user place an order from the menu. My problem is When the user hovers the mouse over one of the images in the menu, another image should be displayed with the description and price of the item. The id attribute of each image identifies the image to be displayed when it’s rolled over. I tired to manged the first image to flip and show the description and price but the problem is when you click on the first box it does not show the price on the order box and the image is not showing either
$(function(){
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
item.click(function(event){
Amount+=parseFloat($(event.target).val());
orderList+=parseFloat($(event.target).val())+"$ -"+event.target.id +"\n";
txtArea.val(orderList);
Total.html("Total: "+Amount.toFixed(2)+"$");
});
//Events
item.hover(function(){
$(event.target).text($(event.target).val()+"$");
$(event.target).addClass("dark");
}, function(){
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function(){
Amount = 0;
Total.html("Total: "+Amount.toFixed(2));
orderList ="";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body{
margin:0px;
padding:0px;
}
.Outside-Container{
margin:10px;
position:absolute;
border:2px solid black;
border-radius:5%;
width:60%;
height:auto;
left:20%;
overflow:hidden;
}
.container{
position:relative;
width:70%;
height:auto;
left:15%;
overflow:hidden;
}
.top-logo-holder{
width:100%;
height:auto;
}
.logo-img{
width: 31%;
display: block;
margin: 0 auto;
}
.line{
height:2px;
width:100%;
position:relative;
background:teal;
border-radius:25%;
}
.main-section{
width:100%;
position:relative;
height:auto;
}
.row1{
display:flex;
flex-wrap:no-wrap;
flex-direction: row;
}
.row2{
display:flex;
flex-wrap:no-wrap;
flex-direction: row;
transition:0.8s;
}
.item{
width:300px;
height:17vh;
background:pink;
margin:5px;
color:#fff;
transition:0.3s;
font-size:20px;
cursor:pointer;
}
.row1 .item:nth-child(1){
background:url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size:cover;
}
.row1 .item:nth-child(2){
background:url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size:cover;
}
.row1 .item:nth-child(3){
background:url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size:cover;
}
.row2 .item:nth-child(1){
background:url("[img4.jpg](https://postimg.cc/hh6pg86y)");
background-size:cover;
}
.row2 .item:nth-child(2){
background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size:cover;
}
.row2 .item:nth-child(3){
background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size:cover;
}
#txtArea{
width:60%;
height:150px;
}
.last-footer-line{
width:100%;
height:auto;
margin-bottom:20px;
}
.dark{
filter:brightness(0.7);
text-align:center;
font-size:20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class = "container">
<div class="top-logo-holder">
<img src ="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img"/>
<div class="line"></div>
</div>
<div class="main-section">
<div class ="row1">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<h1>7.22$</h1>
</div>
</div>
</div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class ="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>

UPDATE 1
OP modified question to reflect actual requirements.
New answer:
all your .items need to look like the first .flip-card.
you are combing some previous try (items) with a new try (flipcard) but forgot to properly adjust the CSS and the JS to reflect the changes. I changes the item eventlistener to work with flipcard and flipcard ONLY.
modified second <h1> in the flipcard, <h1 id="item1">
Modified the calculations in the flipcard.onclick to show the amounts
The code of this answer is from your codepen modified with my changes.
UPDATE 2
Major HTML change: turned all items into flipcards. One of the problems was that you assigned values to elements that cannot have values. jQuery val() function only operates on elements that can have values like <input>
removed all references to item from CSS
UPDATE 3
Fixed NaN problem, flipcard child elements needed to ignore click event (CSS), as JS got the wrong element reference. CSS and JS corrected. Also added .price in HTML for JS to easily find the price tag.
Leaving finetuning and this 'n thats to you...
$(function() {
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
var txtArea = $("#txtArea");
var orderList = "";
// onclick, CHANGED
// Events, CHANGED
$(".flip-card").click(function(event) {
var priceTag = $(event.target).find('.price');
var price = Number(priceTag.val());
Amount += price;
orderList += price + "$ - " + priceTag[0].id + "\n";
txtArea.text(orderList);
// Only round the final value
Total.html("Total: " + Amount.toFixed(2) + "$");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function() {
Amount = 0;
Total.html("Total: " + Amount.toFixed(2));
orderList = "";
txtArea.val(orderList);
});
});
* {
box-sizing: border-box;
font-family: "san-serif";
}
body {
margin: 0px;
padding: 0px;
}
.Outside-Container {
margin: 10px;
position: absolute;
border: 2px solid black;
border-radius: 5%;
width: 60%;
height: auto;
left: 20%;
overflow: hidden;
}
.container {
position: relative;
width: 70%;
height: auto;
left: 15%;
overflow: hidden;
}
.top-logo-holder {
width: 100%;
height: auto;
}
.logo-img {
width: 31%;
display: block;
margin: 0 auto;
}
.line {
height: 2px;
width: 100%;
position: relative;
background: teal;
border-radius: 25%;
}
.main-section {
width: 100%;
position: relative;
height: auto;
}
.row1 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
}
.row2 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
transition: 0.8s;
}
/* MODIFIED */
/* IDs starting with 'flip' */
[id^="flip"] { background-size: cover }
/* flipcard front images */
#flip1 { background-image: url("https://i.postimg.cc/2yCtXwNn/img1.jpg") }
#flip2 { background-image: url("https://i.postimg.cc/vTXKRVGk/img2.jpg") }
#flip3 { background-image: url("https://i.postimg.cc/J7QvH9jx/img3.jpg") }
#flip4 { background-image: url("https://i.postimg.cc/hh6pg86y/img4.jpg") }
#flip5 { background-image: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg") }
#flip6 { background-image: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg") }
/**/
/* ADDED */
.flip-card * {
/*
needed for jQuery onclick,
flipcard children (h1,#item,etc) must ignore clicksss.
*/
pointer-events: none;
}
[id^="item"] {
width: 300px;
border: none;
background-color: transparent;
color: currentColor;
font-size: 2em;
font-weight: bold;
text-align: center
}
#txtArea {
width: 60%;
height: 150px;
}
.last-footer-line {
width: 100%;
height: auto;
margin-bottom: 20px;
}
/* OBSOLETE
.dark {
filter: brightness(0.7);
text-align: center;
font-size: 20px;
line-height: 5em;
}
*/
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
/* little debug helper */
[outlines="1"] * { outline: 1px dashed Crimson }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body outlines="0">
<div class="Outside-Container">
<div class="container">
<div class="top-logo-holder">
<img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" />
<div class="line"></div>
</div>
<div class="main-section">
<div class="row1">
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip1" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Espresso</h1>
<input class="price" id="item1" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip2" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Chocolat Milk</h1>
<input class="price" id="item2" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip3" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Cappuchino</h1>
<input class="price" id="item3" type="text" readonly>
</div>
</div>
</div>
</div>
<div class="row2">
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip4" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<input class="price" id="item4" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip5" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Cookie 1</h1>
<input class="price" id="item5" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip6" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Cookie 2</h1>
<input class="price" id="item6" type="text" readonly>
</div>
</div>
</div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total:</p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div></div>
</div>
</div>
</div>
</body>

Fullscreen expand transform and Set element style as a child

English is not my first language so It's hard to explain details but I'll try hard as I can. I'm really really sorry about that.
I'm making thumbnail expanding fullscreen transition.
like google photos, thumbnail should expand to fullscreen and transform animation should apply too.
My method is make a clone of clicked element, then set initial style(top and left, width and height, etc) same as original element and add class which sets position to zero, and make full expanding. width:100vw and height:100vh, top:0 left:0, position:fixed(class .fullscreen) is it.
I borrowed some idea on http://jsfiddle.net/a7nzy6w6/299/ here.
but in setting styles,
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
This approach will replace all child classes's top, left and height width. even it will ignore "fullscreen" class too.
So it won't transform or expand and remain original style. If I'm not setting styles, transform animation will not apply.
How am I apply fullscreen expand transform animation? Is there any better solution? or How am I Set element's initial style as a child style without replacing added classes in javascript?
again, I'm really sorry for my english. I tried as I can
by the way, I don't know why element.style is not working in snippet
function handler(element)
{
var type = element.getAttribute("data-type")
switch(type)
{
case "image":
transition_fullscreen(element);
break;
default:
break;
}
}
function transition_fullscreen(element)
{
var img = element.getElementsByClassName('el_view')[0];
var rect = img.getBoundingClientRect();
var clone = img.cloneNode(true);
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
clone.classList.add('fullscreen');
var ap = document.getElementById('form').appendChild(clone);
}
#form
{
width: 100%;
text-align:center;
}
#form .element
{
display:inline-block;
float:left;
width: 10%;
height: 20%;
margin: 1.9em;
cursor: default;
transition: background .1s ease-in-out;
animation:animatezoom 0.5s;
}
#form .highlight
{
padding:14px;
transition: transform .1s ease-out;
padding-top:auto;
/*border: 1px solid #ddd;
border-radius: 4px;*/
}
#form .highlight:hover { transform: translateY(-0.5rem) scale(1.0125);
box-shadow: 0 0.5em 1.9rem -1rem rgba(0,0,0,0.5); }
#form .highlight:active { transform:scale(0.8); }
#form .el_img { max-height: 124px; vertical-align: middle; }
#form .el_img img { max-width: 88px; max-height: 124px; margin-top: 5%; border-radius:5px; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-radius:5px;
opacity: 1;
transition: all 3s;
}
#form .el_img .fullscreen
{
z-index:9999;
max-width:100vw;
max-height:100vh;
width:100vw;
height:100vh;
position:fixed;
top:1%;
left:1%;
transition: all 3s;
}
<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>

I founded it:
In your CSS you search for your image like:
#form .el_img .fullscreen
This searches elements in #form that are in .el_img and they have a fullsceen class.
But not an element that is in #form and has el_img and fullscreen classes at the same time.
So you need the remove the the space before .el_img from your selection so it looks like this:
#form .el_img.fullscreen {
/* Rest of your code */
And it will work.
Demo: https://www.w3schools.com/code/tryit.asp?filename=FOBUOKP41CYW

I just made it like Google photos.
By adding some HTML, CSS and JS.
This works with all of your products.
Demo:
let modal = document.getElementById('myModal'),
modalImg = document.getElementById('img01'),
captionText = document.getElementById('caption');
function handler(e) {
switch (e.getAttribute('data-type')) {
case 'image':
transition_fullscreen(e);
}
}
function transition_fullscreen(e) {
modal.style.display = 'block',
modalImg.src = e.children[0].children[0].children[0].children[0].src, captionText.innerHTML = e.children[0].children[0].children[1].innerHTML;
}
const close_btn = document.getElementsByClassName('close')[0];
close_btn.onclick = function() {
modal.style.display = 'none';
},
window.onclick = function(e) {
e.target == modal && (modal.style.display = 'none');
};
#myImg,
.close {
transition: .3s;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#myImg {
border-radius: 5px;
cursor: pointer;
}
#myImg:hover {
opacity: .7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #000;
background-color: rgba(0, 0, 0, .9);
}
#caption,
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
#caption,
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: .6s;
animation-name: zoom;
animation-duration: .6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
#keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: 700;
}
.close:focus,
.close:hover {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width:700px) {
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
</html>

How To Easily Insert Tooltips in HTML?

Does anyone know how to insert a tooltip for a phrase in HTML as you write without too much of code?
The idea is that it shouldn't be a huge block of code, but relatively short, and easily insertable.
An imaginary example: <p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>
The purpose is for when you are writing an article, to add a tooltip explaining what a word or phrase means, but without requiring much effort, or taking too much space on the code.
One alternative I found is this, but it's a huge block of code and it takes a lot of space, also I do not know how to apply this to several phrases, it seems like you need to add a div for every tooltip you want to show.
And I already do know about Bannana but it doesn't allow for styles, and does not show up on phones.

Take a look at this.
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me2
<span class="tooltiptext">Tooltip text again</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me3
<p class="tooltiptext">Tooltip text</p>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h1 class="tooltiptext">Tooltip text</h1>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h2 class="tooltiptext">Tooltip text</h2>
</div>
</body>
</html>
This is courtesy of W3schools. Just note that all of the css in there is not necessary, you just need some to make the tooltip actually work

What you need is library based on Angular-like directives. Every aspect of tooltip may be described directly in html in place of usage. Take a look at:
https://angular-ui.github.io/bootstrap/#/popover
Example of usage:
<button uib-popover="I appeared on mouse enter!"
popover-trigger="'mouseenter'" type="button">Mouseenter</button>

Please try this.
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip:after {
position: absolute;
background: rgba(140,180,140,.5);
content: attr(data-tooltip);
bottom: 100%;
left: 0;
max-width: 200px;
opacity: 0;
transition: all ease .3s;
padding: 5px;
border-radius: 7px;
}
.tooltip:hover:after {
opacity: 1;
}
<h1>Tooltip Example</h1>
<div class="tooltip" data-tooltip="My tips">
Hover over me
<div>