Enhancing webpage aesthetics with CSS transitions and a full-page div overlay

Question

Enhancing webpage aesthetics with CSS transitions and a full-page div overlay

As of now, I have a page with a 'see more' link that reveals a full-page div overlay. The implementation may not be perfect, but it's functional. Here is the link to the page: https://jsfiddle.net/6241cphL/3/

I am looking to enhance the user experience by incorporating CSS transitions to make the overlay appear and disappear more smoothly. Is there a way to achieve this?

Prior to reaching out here, I attempted various approaches:

I experimented with adding hidden and visible classes through JavaScript to control the display of elements.
I also tried to implement a fade-in/fade-out model and explore menu examples without success.

Note: I acknowledge that my current solution may not be ideal, but for my purposes, it works well. While I welcome constructive feedback, I would appreciate suggestions on improving the existing framework to achieve the desired outcome. :)

javascript html css css-transitions

Answer 1

Answer №1

Click to switch on the overlay class:

var overlay = document.getElementById("overlay");

function toggleOverlay() {
  overlay.classList.toggle("active");
}

#overlay {
  position: fixed;
  left:0; top:0; bottom:0; right:0;
  background: rgba(0,0,0, 0.3);
  transition: 0.5s;
  
  opacity: 0;
  visibility: hidden;
}
#overlay.active {
  opacity: 1;
  visibility: visible;
}

<button onclick="toggleOverlay()">Display overlay</button>

<div id="overlay">
  <button onclick="toggleOverlay()">Close</button>
</div>

Answer 2

Click to switch on the overlay class:

var overlay = document.getElementById("overlay");

function toggleOverlay() {
  overlay.classList.toggle("active");
}

#overlay {
  position: fixed;
  left:0; top:0; bottom:0; right:0;
  background: rgba(0,0,0, 0.3);
  transition: 0.5s;
  
  opacity: 0;
  visibility: hidden;
}
#overlay.active {
  opacity: 1;
  visibility: visible;
}

<button onclick="toggleOverlay()">Display overlay</button>

<div id="overlay">
  <button onclick="toggleOverlay()">Close</button>
</div>

Answer 3

Answer №2

To avoid setting inline styles, consider adding or removing a class name (such as active). This allows you to take advantage of CSS transitions and animations. Utilize the transitionend event or similar methods if you wish to apply another class name once the transition is complete (e.g. inactive), which can be helpful for adjusting properties like visibility: hidden.

Answer 4

To avoid setting inline styles, consider adding or removing a class name (such as active). This allows you to take advantage of CSS transitions and animations. Utilize the transitionend event or similar methods if you wish to apply another class name once the transition is complete (e.g. inactive), which can be helpful for adjusting properties like visibility: hidden.

Answer 5

Answer №3

There are various methods to accomplish this task. Here is another approach:

var right_link = document.getElementById('right_link');
var inn = document.getElementById('inner');
var link = document.getElementById('link');

function toggleVisibility() {
  if (inn.classList.contains('active')) {
    inn.classList.remove('active');
  } else {
    inn.classList.add('active');
  }
}
right_link.addEventListener('click', toggleVisibility)

#inner {
  border-radius: 100%;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

#inner.active {
  background-color: #888888;
  border-radius: 100%;
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

<span id="right_link">Click me</span>
<div id="inner">
</div>

Answer 6

There are various methods to accomplish this task. Here is another approach:

var right_link = document.getElementById('right_link');
var inn = document.getElementById('inner');
var link = document.getElementById('link');

function toggleVisibility() {
  if (inn.classList.contains('active')) {
    inn.classList.remove('active');
  } else {
    inn.classList.add('active');
  }
}
right_link.addEventListener('click', toggleVisibility)

#inner {
  border-radius: 100%;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

#inner.active {
  background-color: #888888;
  border-radius: 100%;
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

<span id="right_link">Click me</span>
<div id="inner">
</div>

Enhancing webpage aesthetics with CSS transitions and a full-page div overlay

Answer №1

Answer №2

Answer №3

Similar questions

Addressing the status bar gap issue on the iPhone X with Cordova for iOS 11.0

Angular 2 ngSubmit triggers unexpectedly on occasions when it is not supposed to

What is the best way to save data from a jQuery plugin to a database using ASP .NET MVC?

Using Express JS to implement a post method for multipart form data transmission

The jQuery .on('click') event is only functioning properly the first time it is clicked

Utilizing the GET method within a form

Encountering a "DOM Exception 11: InvalidStateError" when attempting to use websocket.send

What is the solution to fixing the JSON parsing error that says 'JSON.parse: bad control character in string literal'?

Is it feasible to activate a Bootstrap Tooltip from a different element?

Guide on adding CSS files to Next.js 14

In what way can a pointlight be directed towards a specific angle?

Adjust and resize video backgrounds within parent elements on iframes

Using jQuery to target multiple div elements sharing a common class that are separate from the currently selected div

"Unleashing the fun: incorporating a variety of random songs into your

Utilizing Pagination in Python Django to Handle URL Identifiers

By enabling sorting on the table, the checkbox gets selected automatically

Issue: The variable '$viewMap[...]' is either null or undefined

How to display currency input in Angular 2

Is there a way in React JS to attempt a function multiple times using try/catch?

Issue with React-Native 0.68.2 Modals not functioning on iOS platform