Switching Images
How do I make an switching images?
When one image is hovered over, the two images swaps.. What is a switching images? How do you make a switching images? This script and codes were developed by Lauren on 18 September 2022, Sunday.
Switching Images - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Switching Images</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0px; padding: 0px; border: 0px;
}
html, body { background: #8eb7a4; text-align: center; width: 100%; height: 100%;
}
#img1 { background: url('https://columbia.edu/~ljz2112/resources/mid-december_200x200.png');
}
#img2 { background: url('https://columbia.edu/~ljz2112/resources/shed-some-light_200x200.png');
}
#img1, #img2 { display: inline-block; margin: -100px 20px 0px; position: relative; top: 50%; border-radius: 10px; border: 1px #06312c solid; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); width: 200px; height: 200px; cursor: pointer; transition: all 0.2s linear 0s
}
#img1:hover, #img2:hover { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="img1"></div>
<div id="img2"></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>
Switching Images - Script Codes CSS Codes
* { margin: 0px; padding: 0px; border: 0px;
}
html, body { background: #8eb7a4; text-align: center; width: 100%; height: 100%;
}
#img1 { background: url('https://columbia.edu/~ljz2112/resources/mid-december_200x200.png');
}
#img2 { background: url('https://columbia.edu/~ljz2112/resources/shed-some-light_200x200.png');
}
#img1, #img2 { display: inline-block; margin: -100px 20px 0px; position: relative; top: 50%; border-radius: 10px; border: 1px #06312c solid; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); width: 200px; height: 200px; cursor: pointer; transition: all 0.2s linear 0s
}
#img1:hover, #img2:hover { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
Switching Images - Script Codes JS Codes
$(document).ready(function() { var img1 = $('#img1').css('background-image'); var img2 = $('#img2').css('background-image'); $('#img1').hover(function() { $('#img1').css('background-image', img2); $('#img2').css('background-image', img1); }, function() { $('#img1').css('background-image', img1); $('#img2').css('background-image', img2); }); $('#img2').hover(function() { $('#img1').css('background-image', img2); $('#img2').css('background-image', img1); }, function() { $('#img1').css('background-image', img1); $('#img2').css('background-image', img2); });
});
Developer | Lauren |
Username | phantomesse |
Uploaded | September 18, 2022 |
Rating | 3 |
Size | 2,412 Kb |
Views | 26,312 |
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!
Name | Size |
Which Language Spinner | 3,580 Kb |
Deck of Cards | 2,856 Kb |
Messages Inbox | 2,417 Kb |
Dissolving Block Art | 7,893 Kb |
Flexbox Column Stretch | 2,487 Kb |
Standard Layout | 4,316 Kb |
Text Search | 5,634 Kb |
Simple Dropdown Menu | 1,864 Kb |
Scrolling Navigation | 6,631 Kb |
Magnifying Glass Icon | 2,583 Kb |
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!
Name | Username | Size |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!