We Keep Coding

Transform $.show() to css

I got this css:
#pop {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
Until now, in order to show this #pop div I used $("#pop").show(450);
How can I do it more "Cheaply" with css? I'd like to keep the same fade in effect $.show(ms) provides, not just display it.

well you can create animation and switch class on element something like:
$('#pop').addClass('show');
and you would need css something like this:
#pop {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: block;
visibility: hidden;
opacity: 0;
}
#pop.show {
visibility: visible;
opacity: 1;
transition: 1.45s all;
}
As far as I know display property doesn't support transitions so you will need to do it with opacity. You could potentially put both classes on same element to simulate feel of element becoming visible on page load.
Here's update with fiddle, you need to use visibility property:
https://fiddle.jshell.net/6jwfz608/

you can use JS to toggle classes using "className" and use transition in the CSS
CSS
.pop_hidden {
transition:all 450ms;
position: absolute;
top: 0;
left: -101vw;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
.pop_shown {
transition:all 450ms;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
(css edit) i got rid of display and changed it to moving the div from out of frame going right.
JS
document.getElementById('pop').className = 'pop_hidden';//to load the hidden div you can use id too
setTimeout(() => {
document.getElementById('pop').className = 'pop_shown';
}, 20);///adjustable delay if needed(ex: set to var in game loop)
Edit: my opinion on using CSS transition in combination with setting classNames. It's easy and fun to do. For a fading effect, toggle opacity. for and slide effect, toggle positions, there are tons of creative ways to change your elements. And since the naming of classes is completely arbitrary, you can have multiple classes to switch to. Also, i switched it to class out of habit(SORRY). But it should not matter, you can toggle id's the same way.

Here's an example showing onclick functionality and handled with Vanilla Javascript and no Jquery, since you wanted something less weighty.
document.getElementById('showBill').addEventListener('click', function () {
var bill = document.getElementById('bill');
if (bill.classList.contains('hide')) {
bill.classList.remove('hide');
} else {
bill.classList.add('hide');
}
});
img {
opacity: 1;
transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-webkit-transition: opacity 3s ease-in-out;
}
img.hide {
opacity: 0;
}
<button id='showBill'>Show Bill</button>
<br/>
<img src='http://fillmurray.com/300/300' class='hide' id='bill' />

a tag showing image on hover with transition

I'm trying to display an image on the hover of an a tag which I have got complete and fully working, now I'm facing a problem...
I want the image to 'fade' in and out of the page when it is hovered rather than just appearing in order to give it a more satisfying finish.
My code at the minute is...
a.top-row:hover:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
z-index: 10;
top: -295px;
left: -30px; }
and to display the image I have seperate id's for each of the a tags so it's done like this..
a#a1:hover:after {
content: url(../images/cars/audi/a1.png); }
HTML -
<a class="top-row" id="a1">A1</a>

Like this? (background fixed, animating opacity)
a.top-row {
position: relative;
}
a.top-row:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
top: 100%;
left: 100%;
z-index: 10;
width: 70px;
height: 50px;
opacity: 0;
content: ' ';
pointer-events: none;
}
#a1:after {
background: url(https://placehold.it/70x50);
}
#r8:after {
background: url(https://placehold.it/70x50/ff00ff);
}
a.top-row:hover:after {
opacity: 1;
}
<a class="top-row" id="a1">A1</a><br/>
<a class="top-row" id="r8">R8</a>

Having images fade-in using only CSS would only make it complicated. Instead you can use the jQuery fadeIn() and fadeOut() method to achieve the same.
HTML
<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>
jQuery
$('#showme').hover(
function() {
$('#btn').fadeIn('slow');
},function() {
$('#btn').fadeOut('slow');
});
CSS
div {
width:305px;
height:229px;
}
#btn {
display:none;
}

Loading Icon While Images Load

How would I program a loading icon or graphic that appears while images on a page load. An example would be http://landerapp.com/?
My goal is to prevent the user from seeing this images on screen until they are ready to animate (see the problem at http://tsawebmaster1.hhstsa.com/index.html).

Let's begin with a visible loading image that is fixed in the exact middle of the screen. Then, when the page is fully loaded, we'll add a "page_loaded" class on the <body> which:
[1] begins the fade out of the loading image
[2] begins the fade in and translation of offscreen images to the screen
window.onload = function() {
document.body.classList.add("page_loaded");
}
.loader {
opacity: 1;
transition: 2s opacity;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right,
.left {
height: 100px;
position: absolute;
transition: 1s 2s;
opacity: 0;
}
.left {
left: 0;
transform: translateX(-50em);
}
.right {
right: 0;
transform: translateX(50em);
}
.page_loaded .loader {
opacity: 0;
}
.page_loaded .right,
.page_loaded .left {
opacity: 1;
transform: translateX(0);
}
<img class="loader" src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt="" />
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" class="right" />
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTS704tVMgbKCry10AhT09VE8wBY5S9v-PWxTBOa7o52JU0TsjH" alt="" class="left" />

If you are using Vanilla or jQuery I'd suggest you to use imagesLoaded which is meant to achieve exactly what you want.
I'd go with something like this:
$(function(){
$('.img-container img').imagesLoaded().done(function(){
console.log('images loaded');
$('.img-container .loader').remove();
$('.img-container img.hide').removeClass('hide');
}).fail(function(){
console.log('FAILED TO LOAD IMAGES');
});
});
.img-responsive {
max-width : 100%;
}
.hide {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<div class="img-container">
<div class="loader">
Loading image....
</div>
<img src="http://mascotafiel.com/wp-content/uploads/2015/10/perros-Husky-Siberiano_opt-compressor-1.jpg" alt="PrettyCoolImage" class="img-responsive hide">
</div>

Delay in JavaScript slider

I'm coding a little slider with JavaScript and CSS. The slider works, but... in the transition of the last slide to the first I have troubles...
CSS:
.cambiaFoto{
opacity: 0;
transition: all 0.8s;
position: absolute;
}
.cambiaFotoActivo{
opacity: 1;
transition: all 0.8s;
position: relative;
}
HTML:
<div class="col-sm-5 alinear-der" ng-controller="cambiaFoto">
<img src="img/productos/foto1.png" alt="" class="responsive-img cambiaFoto cambiaFotoActivo">
<img src="img/productos/foto2.png" alt="" class="responsive-img cambiaFoto">
<img src="img/productos/foto3.png" alt="" class="responsive-img cambiaFoto">
</div>
JavaScript:
function cambiaFotoCtrl($scope){
function miniSlider(){
var activo = document.getElementsByClassName('cambiaFotoActivo');
activo = activo[0]
siguiente = activo.nextElementSibling
if (siguiente == null){
siguiente = activo.parentNode.firstElementChild
}
activo.classList.remove('cambiaFotoActivo')
siguiente.classList.add('cambiaFotoActivo')
}
setInterval(miniSlider, 5000)
}
jsfiddle: https://jsfiddle.net/paw30e8b/
Somebody knows what is happening here?
Thanks!

Remove position: relative; from the .cambiaFotoActivo rule.
Elements with position: relative will use the natural page order which is next to the other images.

Change opacity: 0; to display: none; and opacity: 1 to display: inline.
.cambiaFoto{
transition: all 0.8s;
position: relative;
display: none;
}
.cambiaFotoActivo{
transition: all 0.8s;
display: inline;
}
Fiddle: https://jsfiddle.net/0ke2q38d/1/
** Don't worry about how the functions are declared and the Jquery, just did that to make an easy example.

The CSS should be adjusted this way:
.cambiaFoto{
opacity: 0;
transition: all 0.8s;
position: absolute;
}
.cambiaFotoActivo{
opacity: 1;
transition: all 0.8s;
position: absolute;
}
Fiddle: https://jsfiddle.net/gmdwv4hg/
Basically you just have to set positioning to absolute on both classes.

Well, i'm still wondering what happend here... why the problem is the last slide :(. I know the solution in this case, is a solution that not resolve at all my question. I want to fade out and fade in using opacity and transition. Works well in every slide... the problem is between the last and first slide. ¿Why? I don't know :P
But if you wanna know, I just delete the transition line in .cambiaFoto. Then the active slide disappear and the new fade in.

How do I add a fade to a change image mouseover event?

This is my Javascript function so far :
function changeImg (){
document.getElementById('main').style.backgroundImage = "url('./img/map/maphv.png')"
}
function changeBack () {
document.getElementById('main').style.backgroundImage = "url('./img/map/map.png')"
}
This is in the HTML :
<div id="main">
<a data-title="Africa" href="collection/africa.html" onmouseover="mouseoversound.playclip();changeImg()" onmouseout="changeBack()"><img class="africa" src="./img/map/africa.png" height="50"/> </a>
This is the CSS :
#main {
background-image: url(../img/map/map.png);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 580px;
position: relative;
}
#main img.africa {
top: 244px;
left: 397px;
height: 33.5%;
position: absolute;
width: 18%;
opacity:0;
}
#main img.africa:hover {
top: 244px;
left: 397px;
height: 33.5%;
position: absolute;
width: 18%;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
So the CSS is quite irrelevant but I posted it so that you can see how the top hover is fading in and out. I just wanted to add the fade to the onmouseover event to the background map main element.
So really I just need to add the fade in the Javascript function and add that function to the mouseover event handler?
Any ideas as Javascript is not my first language.. ;)

If you can use jquery,then you can do something like
FIDDLE DEMO
$("#main").on("mouseenter", function () {
$(".africa").stop(true, true).fadeOut(); /***fadeIn or fadeOut***/
});

Ditch the Javascript
If i understand your question correctly, you want to fade between images when you hover over an element, right? This can easily be done in pure CSS.
Give the element you want to animate a background image
Add a child element that's the same size as the parent. This can be an <img>, or a span or div with a background image
Set the opacity for the child element to 0, unless someone hovers over the parent element.
HTML
<div class="fading-bg">
<img src="foo/bar.jpg" alt="stuff">
</div>
CSS
.fading-bg{
position:relative;
width: 100px;
height: 100px;
background: no-repeat center;
background-size: cover;
}
.fading-bg img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
}
.fading-bg:hover img{
opacity: 1;
}
Javascript is awesome, but in my personal opinion you should avoid using it for simple animations like this, as CSS is more than capable of doing it on its own.