Employing jQuery and/or CSS to increase the size of an image upon hovering while keeping it enlarged when selected

I am looking to enhance the functionality of my website using jQuery or css. My goal is to be able to select one of 3 images and:

  1. enlarge the image when hovered over
  2. keep the selected image enlarged

Below is the code that I currently have. Unfortunately, I am not utilizing HTML5. Any assistance on this matter would be greatly appreciated.

<body>
<table>
    <tr>
        <td>
            <input type="radio" name="editList" value="general"><img src="images/debit_general.png" />

            <input type="radio" name="editList" value="plane"><img src="images/debit_plane.png" />

            <input type="radio" name="editList" value="robot"><img src="images/debit_robot.png" />
        </td>
    </tr>
</table>
<script>
    alert($("#editList").val);
</script>
</body>

Answer №1

Here is a suggestion for what you could do. I am adjusting the scale when hovering and highlighting input fields when checked. If you encounter issues with images covering input fields, consider using width instead.

var checkboxes = document.querySelectorAll('.checkbox');

for(var i = 0; i < checkboxes.length; i ++){
  checkboxes[i].addEventListener('change', function(e){
    if(e.currentTarget.checked){
      e.currentTarget.parentNode.className = 'selected';
    } else{
      e.currentTarget.parentNode.className = '';
    }
  });
}
label img{
  width: 50px;
  transition: 1s transform;
  transform-origin: 0;
}
label:hover img{
  transform: scale(1.5);
}
.selected img{
    transform: scale(1.5);
}
<label>
  <input type="checkbox" class="checkbox">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL0AAAEKCAMAAABwsaR7AAABm1BMVEX////+1CDRsH3XqikAAADHvbvn9v3VqCn/2yHYqyn/1yD/2SHbrSr/3CHr+v/u/v/Nw8HYtoHsxFPv7+/Hx8ft7e319fX/7KXfsyfmuiba2tr4+Pj70SH/66T/6qj1yiKTk5OoqKji4uKuur+5ubl1dXW+liTe3t6bm5vOzs6np6e3t7fuwyRWVlYdHyCLi4sAABfYtBvKoCc/Pz+pjRVqamowMDChrLEcHBybg163kSJ9hYnI1dv+21Xd6/JxXQDIpxkoHADDpHVVRQBRUVGrhyAAAA5uVxVOQQqVdRi2mBf/5pA9MADj0JE2NjavlGkbFABkTQDPx7GLbRGMhYRvXQ4oLDVzbWxvdnpPS0pdY2YoHwCKbRrBmUIRDQNsWg6qeiP/4nxBSVHs7NR8iJGTeQBLOg4jKjI8MAumsblPV15eXVYWHCqehhnj1KLauFTewnKfhDjzylWNcT/Ht5epdgC1kVBQQCWyhzdxUQ/Tpz2JaCencAC7nWNMSjxCOC5jUz95Zkumi2QuJhprYT7+2Uk3MRetp5GKdFJoWugCAAAgAElEQVR4nM1d6UMaWbaXeJCiKBaHRQQSloCyioigEVtQXIAhqG00ijZJ0+3SJk4vb2bSr+e9STLdnZc/+917a6GqqAJEpXI+JCqgv3vq7Ofce8fGHpJigciLXC4SiTvsD/p3HoDsaYBUKpKOpiMnAPm4S2tAA5FrNhZy2hH2bKIDOBRtQVRDUINRKD0HHJ04pS+FYTmkDagBKZaCzeCs1+VMQzR4AikZ2gg4tME1CCUAsizeNMTQv6EcBKTviJKff4nk2oQ4Z1ni4GG/cEBK+qYAfJnGxwtZXkc9HQGxzzWkb9vcHCGmwalxIny5/EL886zkbS4IjwjQbSgAwpdB8IpecC3npG+cGxGiW5BTZE0giP7xhjyJQK59NL+9jYznXLaZTnjIolxfoN2JdOTDAbF47ohY/NNK8eDnn3efff784RP+PhtA2hzJ9fg9mpBXYKgrnEUw94o3tVJSR5kpijKZTH9+9depJ88nn70D2A4Eoeev0oDCHKJYDkE/LPkRZpqmdSKi//x2amrq8aM/0Bu+NL3NRfC/4QaCvgVJSqdMX/31ydTUk90WNL+siAGz09GA0+o4swVq4BH9+dcnj6ce74LcB2tKdnB6c7C+xTDj/sWLHuiRAGH8Tz5Cw9n/146IYuAAOEPY3T7qoNwLPcL/1WOE/xF8OYYThWf1BWZ83K3T9UWP6FvM/vfELXwJlIIdxjg+ziBkpptXfdHTfz5G6vvHFwJ/Eyru8fFxg49A64ddYP8fkNAa+Rjm/NUOEhtDcjDgLPu/QvA/fAHRfgS2djB64+DYMSH4j3/XPNoPwpl7ZsZ4O9Zj7n/7ZOq5PHkZNYWgzIwbkcoabsd6RMjzbmisuVkYR9ARTd+O9Yh8RPS1lJ04bDEEvMF/a95jw/McItqBd0GFBT8+fnvwOt3jx1PPQLuILQAzrNyMu28tODpid55ox3wv7HCsN9...
</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to integrating forms on top of a background image and alongside a navigation bar

My main challenge is my limited knowledge of Bootstrap/CSS, which has led me to piece together code from different sources and tweak it to fit my needs. Another issue I'm facing is the correct nesting of containers/rows/columns around my navbar (which ...

I am experiencing difficulties updating my website

Is there a way to automatically refresh my webpage in PHP whenever I press the enter key? ...

Mastering the correct usage of Express middleware functions in routers

Displayed in this instance, are the csrfProtection and parseForm functions being utilized as parameters/callbacks within the GET and POST requests... var cookieParser = require('cookie-parser') var csrf = require('csurf') var bodyParse ...

Utilizing the "return" keyword in Javascript outside of function declarations

Exploring the Impact of Using the Return Keyword in JavaScript Scripts Beyond Functions in Browsers and Node.js Recently, I experimented with utilizing the return keyword in a Node.js script like so: #!/usr/bin/env node return 10; My initial assumption ...

Is there a way to incorporate both duration and easing effects when using slideToggle()?

I am currently working on a sliding menu with jQuery and the bounce jQuery UI effect. The issue I am encountering is that the hover event does not trigger when I hover over the first li element. Here is the snippet of my JavaScript code: $(document).ready ...

Focus on a specific data set within a JSON file when working with Backbone.js

Hello! I am new to learning Backbone.js and would love some suggestions from the experts out there. Here is a snippet of my code: app.Collections.UserCollection = Backbone.Collection.extend({ model: app.Models.IdModel, url: "/test/test_data.json" ...

Storing dynamic field data in React JS: Tips and Tricks

I need help figuring out how to save dynamic field values in a specific format to the database. Here is an example of the format I am looking for: "items": [ { "item_id" : 6, "description" : "", ...

Exploring Typescript: Understanding the nuances of importing and exporting values or references

Currently, I am facing a challenge while converting Javascript code to Typescript, specifically with regards to import and export functionality: Intended Functionality: I aim to import 'POST_Requirements' into multiple other files. Each file tha ...

Emphasizing the importance of organizing asynchronous jQuery Ajax requests

In my code, I have 2 asynchronous jQuery ajax calls. These calls are executed consecutively from a JavaScript file. The first call is initiated when the page loads and typically takes about 60 seconds to complete. However, depending on user input, the seco ...

Tips for preventing vw fonts from constantly increasing in size

In my current project, I am working on a responsive website with an html max-width of 1000px. I have set all the fonts using vw units, but I'm facing an issue when the browser is expanded beyond 1000px. Is there a solution to prevent the fonts from in ...

Tips for displaying Modal Bootstrap at the bottom of the screen

Is there a way to configure Bootstrap so that the modal appears at the bottom of the browser? https://jsfiddle.net/9fg7jsu3/ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button& ...

Attempting to employ jQuery to generate a text input that allows for inputting multiple incorrect answers

I am putting together a webpage for a friend who has allergies. The idea is that users can input a food item, and the page will indicate whether or not my friend is allergic to it. I have compiled an array of his food allergies, and the goal is for the pag ...

a guide to submitting files using ajax and jquery in symfony3

Hello everyone, I'm having an issue with uploading files using AJAX in Symfony3. I am able to detect the event of selecting a file without submitting or clicking using AJAX and jQuery, but when I try to access the request in the controller method, it& ...

Updating the count property of an object using setState in React

I have an array of integers ranging from 0 to 6 as my input. My goal is to create an object that gives the count of each number in the array. edition = [6, 6, 6, 1, 1, 2]; const [groupedEdition, setGroupedEdition] = useState([{"0": 0, "1&quo ...

Include a class in the <code> element if it is not nested within a <pre> tag

I am incorporating the Highlight.js script on my website built with DocPad. I am looking to enhance the appearance of a basic <code> tag (equivalent to `` in Markdown), but this conflicts with the existing styles applied by Highlight.js. Highlight. ...

The integration of the jQuery library within the server side of a Google Apps Container Bound Script

Can the jQuery library be utilized server-side in a Google Apps Script that is Container Bound to a Doc or Sheet? If so, what steps should be taken? In a previous inquiry on Stack Overflow, I sought guidance on incorporating jQuery into a container-bound ...

One of the three identical paths in Node.JS is experiencing issues

I'm brand new to Node.js and currently working on creating a backend api for a project. I have 3 routes in my application: societies, users, and emails. //module for email functionality emailsModule = require('./api/routes/emails')(co ...

Utilizing ajax for fetching a data table

I am new to using ajax and have successfully retrieved data from a table. However, I am now trying to pull in an entire data grid but not sure how to achieve this. In my index.php file, I have the following code: <html> <head><title>Aj ...

The attempt to unserializing the configuration schema in Yii2 was unsuccessful

My brain feels scrambled... I am attempting to insert an image in HTML within Yii2. I retrieve it from the database and place it into the view file, but when I try to display it using HTML tags, an error is thrown. However, the image is being added perf ...

Explore the category options in the reference document using Node.js

Category Schema const CategorySchema = mongoose.Schema( { catName: { type: String, required: true } }, { timestamps: true } ); Product Schema const ProductSchema = new mongoose.Schema( { brand: { type: String, required: true }, title: ...