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

Is it possible to create games that can be played on both Android and PC platforms?

I'm interested in using MonoDroid from Xamarin to create a simple 2D platformer that can be played on both Android devices and PCs. Having experience with PC game development, I understand the importance of choosing the right libraries for rendering ...

android.netopenglopengl-esxamarin.android

Is there a way to ensure my function runs as soon as the page starts loading?

My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I&apo ...

javascripthtmlcssonloadtransition

Using CSS to Showcase Text and Images

Setting up a database for Weapons for Sale and incorporating PHP code: <?php echo '<link rel="stylesheet" href="display.css" type="text/css">'; function FindPhoto($name) { $dir_path = "http://www.chemicalzero.com/FireArms_Bis/Guns ...

phphtmlcss

Transferring images from an Android device to a MySQL server

Within Activity A, there are 3 instances of listView. Upon clicking the submit button, my objective is to save both the text and imagePath into MySQL, with the image being stored in the PhotoUpload folder. String imagess; Uri imgURI; public void uploadI ...

phpandroidjsonimageuri

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Embracing PWAs with subdomains – seamless installation

One of my Progressive Web Applications (PWA) called app A contains a link to another app, app B. Initially, I hosted both apps on the same subdomain (for example: ) and everything worked perfectly - installing app A also installed app B. However, when I a ...

javascriptandroidangularprogressive-web-apps

Polyfill for the :nth-column CSS4 Grid-Structural pseudo-class

In my CSS grid layout, I want to include a margin in every even column. While the :nth-column pseudo-class would be ideal for this, it unfortunately won't be supported in the near future. Could anyone recommend any polyfills that I could utilize, or ...

csscss-selectorscss-gridpseudo-classpolyfills

Utilize SVG background with transparent text for a clear view of surrounding content

I'm looking for a way to overlay a video with a semi-transparent black div that includes text and a button, while still allowing users to see the video playing behind it. I previously achieved this using a PNG image but now need to apply the effect to ...

javascriptjqueryhtmlcsssvg

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

I have encountered an issue where this code functions properly in JSFiddle, but not when run locally in Chrome or Firefox. I suspect there may be an error in how the CSS or JavaScript files are being linked. In the Firefox console, I am receiving an error ...

javascriptjqueryhtmlcssjsfiddle

Changing the height of a Bootstrap 3 row without using less variables

Can someone please explain how to adjust the .row width in Bootstrap so that the col grid still functions correctly, but certain .rows are tighter than default? Thank you. ...

htmlcsstwitter-bootstrap

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

javascriptjqueryhtmlcssangularjs

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

jquerycssjquery-uioverflowdraggable

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

I am facing an issue with two columns positioned side by side. The right column contains a tooltip that overflows to the left on hover. Both columns are scrollable and relatively positioned to allow the tooltip to follow the scroll. However, the tooltip is ...

javascriptcssreactjspositionoverflow

How to retrieve information from a URL in an Android application

I am trying to decode JSON content from a URL. For example, if the URL is: and it contains the following JSON: { "employee":{"message":"username is exist!","id":0,"name":0,"username":0,"email":0,"status":500} } I need to retrieve this data from url.com, ...

androidjsonurl

CSS Interactive Design Breakpoints

Do my Break points at 768, 480, and 225 provide enough support for a responsive design, or should I consider adding more? 768 + | Computer 480 - 768 | Tablet 225 - 480 | Smartphone 225 < | Phone / Mini Browser ...

htmlcss

Tips on how to stop a webpage from scrolling and instead allow only the inner content to scroll

Check out my plunker for reference. The goal I am aiming for is as follows: The webpage should stay fixed and not scroll in any direction If the content overflows its container, a scroll bar should appear strictly within that container I have a main co ...

htmlcss

Is it possible to relocate my navigation bar?

I am struggling to align my top horizontal navbar to the right next to the header that reads "Best TV Ever". I have already floated it to the right, but now I need it to move up to the top of the page. Can anyone help me with this? Here is the link to th ...

htmlcss