We Keep Coding

Scroll fix and flipcard stack

I have a flip card where i have put an iframe on the flip side and i want to prevent the front view from scrolling the iframe before resuming normal scroll process. how can I achieve this with JavaScript ?
Prevent from scrolling iframe in flip front for mobile device on touch scroll. Css solution didn't work and now I would like some JavaScript that can help me achieve this for every .flip-box-front
fieldset {
height:200px;}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
border:0.5px solid #72bcd4;
border-radius:12px;
padding: 2px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #fff;
color: black;
}
.flip-box-back {transform: rotateY(180deg);}
.flip-box-back iframe {
border: 0px none;
frame-border: 0px ;
margin-height: 0px;
}
.card.is-flipped {transform: rotateY(180deg);}
<fieldset>
<legend>header title </legend>
<div class="card">
<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>
<div class="flip-box-back">
<iframe src="https://ee-3.blogspot.com">
</iframe>
</div>
</div>
</div>
</fieldset>
<br/>
<fieldset>
<legend>header title </legend>
<div class="card">
<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>
<div class="flip-box-back">
<iframe src="https://ee-3.blogspot.com">
</iframe>
</div>
</fieldset>
var cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
})

Adding a z-index to .flip-box-front solved this problem.
.flip-box-front {
background-color: #fff;
color: black;
z-index: 2;
}

How to make animation when I hover img tag to show text under him

I need to make animation when I hover img tag to show text under him (must be animate showing text, slowly) but that is not all It must also move other content down when text show and to return when text is gone (when is not hover). Very Important showing text must be animate and going back.
I don't care if it works with jq or css or both just need work. I am a beginner so maybe it is obviously I just don't see it.
HTML:
<div class="first-block"></div>
<div class="secend-block">
<div class="box">
<img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">
<p>asdasdasssssssssssssssssssssss
asdddddddddddddddddddddd
asdaaaadsssssssssssadsadsdasd
adsssssssssssssssssadsadsadsa
</p>
</div>
</div>
<div class="third-block">
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
</div>
CSS:
.first-block{
width: 99%;
height: 100px;
background: #f10000;
}
.secend-block{
width: 99%;
height: auto;
background: #ffffff;
}
.secend-block .box{
width: 200px;
padding-top: 10px;
margin: 0px auto;
}
.secend-block .box p{
display: none;
}
.third-block{
width: 99%;
height: auto;
background: #4400ff;
}

Use .class:hover
Basically, when .image is hovered, we want to change the styles of .text. The CSS query .image:hover + .text selects the .text the element where there is an image that is being hovered right before it.
.image {
width: 250px;
}
.text {
max-height: 0px;
overflow: hidden;
transition: max-height 1s;
}
.image:hover + .text {
max-height: 32px;
}
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</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>

Text animation glitch on hover

I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down.
I've put this up on : https://codepen.io/anon/pen/qGwpaG
My code
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})

You need to make sure that only the parent element is triggering the events. When using mouseover/mouseout, any child element will also trigger these events, which you don't want.
To fix this, you can either use mouseenter/mouseleave or, even better, use the hover shorthand:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
https://codepen.io/anon/pen/mYgxWv

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>