Styling borders of an image

I am working on an application where I have a collection of images. When the user clicks on an image, it receives a thick border around it at a certain distance.

Now, I want to customize this border to reduce the spacing between the image and the border by utilizing CSS.

Does anyone have any recommendations on how I can make this adjustment?

Thank you in advance for your help!

The following is the CSS code being used:

.logo_set_iphone {
    display: inline-block;
    width: 100%;
    float: center;
    padding-top: -50px;
    padding-bottom: -50px;
    padding-left: -50px;
    padding-right: -50px;

}
.logo_set_iphone img {
    display: inline-block;
    text-align: center;
    height: 50px;
    float: center;
    margin-bottom: -6px; 
    margin-top: -6px;
    margin-left: -5px;
    margin-right: -5px;
    padding-top: -10px;
    padding-bottom: -10px;
    padding-left: -10px;
    padding-right: -10px;
}

All of the images are contained within the "logoset" class.

androidcss

Answer №1

<html>
<style type="text/css">
.container img{
    border:20px solid black;
}
</style>
<script type="text/javascript" >
function change(){
this.style.borderWidth="10px"
    }
</script>
<div class="container">
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" onclick="change.call(this)" >
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" onclick="change.call(this)" >
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" onclick="change.call(this)" >
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" onclick="change.call(this)" >
    <img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" onclick="change.call(this)" >
</div>
</html>

Feel free to give the updated code a try. Based on your feedback, I believe this meets your requirements for changing the image border on click.

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

What is the best way to separate the data of two objects within a single JSON response?

When receiving a JSON response from the server, I encountered data of two objects - one being an ArrayList Type and the other a POJO class (HomeVO). My goal is to split this data and store it into different objects. Currently, I am utilizing the GSON API ...

androidjsonservletsgson

Exploring methods to modify the style attribute of a div tag in .NET

Using .NET, we need to access the CSS style of a div and input certain values in the code behind on page load. Since the div is located on the master page and this is another separate page, we are unable to add RUNAT="SERVER" to the div. ...

c#css.net

The -moz-use-text-color property does not function properly in Chrome and IE versions 9 and above

I have added -moz-use-text-color for border-color in the following CSS code: .booksline{ border-image: none; margin: 0 auto 0px; width: 96%; height:220px; padding:20px 20px 20px 0; border-width: 1px 1px medium; border-style: solid solid none; border-colo ...

htmlcss

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

c#javascriptcss

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

c#cssasp.nettwitter-bootstrappanel

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements ...

cssbootstrap-4

Switching the checkbox value upon clicking a div element

One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I hav ...

javascripthtmlcssangularjscordova

CSS - fixed table headers

Check out my CodePen example here - Code In this demo, I have a table inside a container where the table is larger than the container. As you scroll horizontally, both the table and headers move accordingly. However, when scrolling vertically, I want th ...

htmlcss

How can I align an input to the right using Bootstrap?

I found an example of a navbar that I liked and decided to copy it. Here is the code snippet: <div class="container"> <h3>Nawigacja zamknieta w kontenerze</h3> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> < ...

csstwitter-bootstrap

Dynamic WordPress Website Designs

Seeking recommendations for responsive WordPress themes that offer extensive CSS and structural customization options. The goal is to retain all of WordPress's built-in features, such as blogging capabilities, while having the freedom to completely co ...

wordpresscsswordpress-theming

Explore the information stored in two different arrays

Currently, I'm trying to access and load data from 2 arrays. I've managed to successfully load the items array within the first array. However, when attempting to access the data inside the second array, it fails to load. The JSON response conta ...

androidarraysjson

Positioning a div relative to another div using the pos:fixed attribute

Is there a way to make a fixed position div relative to its parent div instead of the window using only CSS? I want a sticky block that follows the content while scrolling with the page, and stays in place even when the window is resized. I know this can ...

jquerycss

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

htmlcssflexbox

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

javascripthtmlcssforms

Placing text alongside an image at the top of the page

Here's the HTML code generated by JSF: <div align="center"> <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/> <span style=""> Welcome abc, <input type= ...

htmlcsstext-alignment

SASS mixin that enables flexbox capabilities without supporting older, legacy versions of flexbox

Is it possible to provide support for browsers lacking flexbox compatibility (such as IE) while using SASS mixins? I have been quickly implementing the display:flex property with the following mixin. However, I am facing challenges with IE and need to man ...

cssinternet-explorersassflexbox

Troubleshooting a problem with HTML table styling

Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...

htmlcss

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

javascriptcssgoogle-chromeweb-applicationspage-refresh

Styled-components is not recognizing the prop `isActive` on a DOM element in React

In my code, I have an svg component that accepts props like so: import React from 'react'; export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg> ) ...

javascriptcssreactjsecmascript-6styled-components

Changing the Div heights in Material UI with grid layout customization

I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...

javascriptcssreactjsmaterial-uistyled-components