How to fade out images on click

Question

I recently got into coding and I'm enjoying it pretty much. With that being said, I'm pretty new to it and very... rookie. I was wondering if there's a way I can make my centered Icon fade out instead of just disappearing on click. The same goes for the overlay that I've created.

function functionHide(divId, divId2, ) {
  let x = document.getElementById(divId);
  let y = document.getElementById(divId2);
  x.style.display = "none";
  y.style.display = "block";
}

#icon {
  content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
  height: 256px;
  width: 256px;
  top: 50%;
  left: 50%;
  position: fixed;
  margin-top: -128px;
  margin-left: -128px;
  z-index: 1;
  transition: .4s ease;
  display: block;
}

#overlay {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: none;
}

#icon:hover {
  cursor: pointer;
  transform: scale(1.5);
  transition: transform .4s;
}

<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
  <div id="overlay"></div>
</div>

Might want to try this https://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect — Rodrigo M. F. Castilho, Feb 25 '21 at 14:30
e a look to https://github.com/nefe/You-Dont-Need-jQuery#8.3 — Mister Jojo, Feb 25 '21 at 14:34

Spectric · Answer 1 · 2021-02-25T15:05:10.013

Use a @keyframes animation or change the opacity of the image, granted that the transition was set.

`@keyframes`

function functionHide(divId, divId2, ) {
  let x = document.getElementById(divId);
  let y = document.getElementById(divId2);
  x.style.animation = "fadeOut 0.2s forwards";
  y.style.animation = "fadeOut 0.2s forwards";
}

#icon {
  content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
  height: 256px;
  width: 256px;
  top: 50%;
  left: 50%;
  position: fixed;
  margin-top: -128px;
  margin-left: -128px;
  z-index: 1;
  transition: .4s ease;
  display: block;
}

#overlay {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: none;
}

#icon:hover {
  cursor: pointer;
  transform: scale(1.5);
  transition: transform .4s;
}
@keyframes fadeOut{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
  <div id="overlay"></div>
</div>

Explanation

fadeOut 0.2s forwards
^       ^    ^
name of animation
        duration of animation
             instructs the animation to run once, then stay in the same state after animation

Or you can consider using the jQuery fadeOut() function like so:

function functionHide(divId, divId2, ) {
  let x = document.getElementById(divId);
  let y = document.getElementById(divId2);
  $(x).fadeOut();
  $(y).fadeOut();
}

#icon {
  content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
  height: 256px;
  width: 256px;
  top: 50%;
  left: 50%;
  position: fixed;
  margin-top: -128px;
  margin-left: -128px;
  z-index: 1;
  transition: .4s ease;
  display: block;
}

#overlay {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: none;
}

#icon:hover {
  cursor: pointer;
  transform: scale(1.5);
  transition: transform .4s;
}
@keyframes fadeOut{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
  <div id="overlay"></div>
</div>

score 0 · Answer 2 · answered Feb 25 '21 at 14:39

There is a good fade in example.

Use an animation in the hide class, for example:

.hide {
    animation-name: fadeOut;
    animation-duration: 3s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

Remember to use browser extensions like -webkit or -moz.

How to fade out images on click

2 Answers2

@keyframes

`@keyframes`