Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS?
Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS?
Below is a straightforward code snippet that achieves the tasks you have inquired about. I've utilized jQuery's hover function to apply event handlers for modifying the images.
To create four equal quadrant buttons, I removed font-size, padding, and margin on the container (body) and instead used 50% width and 50vh (viewport height).
$('button').hover(function() {
$(this).find('img').attr('src', 'http://via.placeholder.com/200x150');
}, function() {
$(this).find('img').attr('src', 'http://via.placeholder.com/350x150');
});body {
font-size: 0;
margin: 0;
padding: 0;
}
button {
box-sizing: border-box;
width: 50%;
height: 50vh;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><img src="http://via.placeholder.com/350x150"></button>
<button><img src="http://via.placeholder.com/350x150"></button>
<button><img src="http://via.placeholder.com/350x150"></button>
<button><img src="http://via.placeholder.com/350x150"></button>I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...
Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...
I attempted to bind a value to an input by using a variable declared in the data object, but I also need to include a prefix and a suffix. <input id="topnavback", v-bind:value="rgb({{themestopnavback}})", class="jscolor"/> The value "themestopnavba ...
I have encountered an issue while working on a project that involves showing or hiding a div based on the selection of a drop down value. The show/hide functionality works perfectly when implemented on the same page, but it fails when I try to do the same ...
I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...
I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...
I'm looking for a way to make my div disappear when I scroll down and reappear immediately when I start scrolling back up. Currently, it only works when I reach a certain position instead of taking effect right away. I need assistance in calculating t ...
I'm attempting to design a filter dropdown feature where only the label of the dropdown is visible at first, and then upon clicking the label, a list of options will drop down over the top of the remaining content using absolute positioning. The chall ...
Despite my efforts, I've been unable to achieve success. The challenge I'm facing is with duplicating controls for adding images. I have a button and a div where the user can choose an image by clicking the button. The selected image appears in ...
Currently, I have incorporated the jQuery countdown into my project which consists of solely the essential Javascript required for the countdown to function. However, I am interested in achieving a similar visually appealing "animated" style similar to t ...
I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...
Setting up my own contact form for the first time using PHP has been a learning experience. While I am able to receive emails from the form, I'm struggling to display the user-inputted information in the email. The HTML <label for="name"> ...
Does anyone know of an upload tool or plugin that has a similar look and functionality to the one used on Codecanyon's website? I tried Uploadify, but it doesn't work on all browsers. I need something that is compatible with all browsers, whether ...
Currently building a webpage, I need to provide a link to a log file located on the server. The catch is that the filename includes a random number at the end, but I do know the starting part of it. Here's the snippet of my code: <a href="../New_f ...
How do I remove nested options inside a select element upon button click? I'm not sure where my mistake is, could it be in the for loop? var select = document.getElementById('colorSelect'); var options = document.getElementsByTagName(&ap ...
Explore more here Check out this link too: https://i.stack.imgur.com/8bhzV.png If you are struggling with finding the red marked box number, take a look at the image on this link: https://i.stack.imgur.com/mca05.png Don't worry, I have provided my ...
Comparing the alignment of split button dropdowns in Bootstrap 3 and Bootstrap 4, I find that Bootstrap 3 aligns them to the left of the first button, while Bootstrap 4 only aligns them according to the second button. https://i.stack.imgur.com/gAt78.png h ...
I am currently facing an issue with deleting a customer in my Angular + PHP application. Although the application returns success without any errors, it fails to delete the customer from the database. Here is the code snippet of my Angular controller: ...
Within my angularjs application, I have configured the env.js file as shown below: (function (window) { window.__env = window.__env || {}; // API url window.__env.apiUrl = 'http://aaaaaaa.com/'; // Base url window.__env.baseUrl = '/angula ...
Issue: ./src/card.js There was an import error: 'Bottom' is not exported from './styles/cards.style'. card.js import React from 'react' import { Bottom, Color, Text, Image } from "./styles/cards.style"; fu ...