Background change in pure CSS

Developer
Miro Karilahti
Size
3,236 Kb
Views
70,840
  1. Background change in pure CSS Previews
  2. Background change in pure CSS HTML Codes
  3. Background change in pure CSS CSS Codes
  4. Background change in pure CSS JS Codes

How do I make an background change in pure css?

Smooth animated background change made with pure CSS. Please, read my comment in JS box.. What is a background change in pure css? How do you make a background change in pure css? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.

Background change in pure CSS Previews
IQ Test

Background change in pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background change in pure CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="button">Hover me</div>
<div class="bg-1"></div>
<div class="bg-2"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Background change in pure CSS - Script Codes CSS Codes

body { background-color: #000;
}
.button { display: inline-block; position: fixed; top: 50%; left: 50%; z-index: 2; border: 2px solid rgba(255,255,255,0.6); padding: 20px 32px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: sans-serif; text-transform: uppercase; color: rgba(255,255,255,0.8); cursor: pointer; -webkit-transition: border-color 0.5s, background-color 0.5s, color 0.5s; transition: border-color 0.5s, background-color 0.5s, color 0.5s;
}
.button:hover { background-color: #fff; border-color: transparent; color: #444;
}
.button:hover ~ .bg-1 { opacity: 0;
}
.button:hover ~ .bg-2 { opacity: 0.7;
}
.bg-1,
.bg-2 { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; -webkit-transition: opacity 1s; transition: opacity 1s;
}
.bg-1 { background-image: url("//lorempixel.com/g/1920/1200/nature/5/"); opacity: 0.6;
}
.bg-2 { background-image: url("//lorempixel.com/g/1920/1200/animals/3/"); opacity: 0;
}

Background change in pure CSS - Script Codes JS Codes

/* Unfortunately, this method is somewhat impractical as you have to place background elements after the button and set a smaller z-index which requires absolute/fixed positioning. Still, not that big of a deal with only a few elements and it looks cool. --- Changelog: 4/10/2016 * Figured out I wasn't that bright while writing the original code * Cleaned and improved the code * Changed Slim to Jade and Sass to Stylus - not because they're better or anything, I just wanted to * Spent a few minutes to come up with some clever changelog message 12/9/2014 * Made some miscellaneous improvements * Cleaned the code even, even more 9/20/2014 * Improved fallback for larger resolutions * Cleaned the code even more 9/17/2014 * Translated HTML to Slim and CSS to Sass for easier editing * Made some small fixes and removed headers * Fixed the images again 6/7/2014 * Fixed the images
*/
Background change in pure CSS - Script Codes
Background change in pure CSS - Script Codes
Home Page Home
Developer Miro Karilahti
Username miroot
Uploaded July 07, 2022
Rating 4.5
Size 3,236 Kb
Views 70,840
Do you need developer help for Background change in pure CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Miro Karilahti (miroot) Script Codes
Name
Flat sidebar
Long Shadow Calendar Icon
Calendar
Single element Nexus 5
Pure CSS Gallery
Long Shadow Camera Icon
Button with sliding information
Pure CSS Card Deck
Flat Text Editor
Navigation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!