Smoothly reveal a border at the moment of transition

Question

Smoothly reveal a border at the moment of transition

I currently have images set up as checkboxes that display a yellow border upon clicking with a transition effect. However, the transition of the border causes the images to shake and shutter slightly due to margin adjustments.

To resolve this issue, I tried setting a default margin of 3px which gets overridden when the border appears (also 3px). This led to an awkward shaking effect as the border grows during the transition.

My goal now is to have the border instantly appear as 3px upon clicking without causing any immediate visual disturbance. Here is my current CSS code:

Unfortunately, I'm unable to provide the full CSS code here due to restrictions, but I have included a snippet below:

img{
    width: 100%;
    max-width: 380px;
    border: 3px solid rgba(255,0,0,0);
    background-color: black;
    height: 100%;
    max-height: 250px;
    margin: 3px;
    border-radius: 15px;
    transition: opacity 2s ease, border 1s ease;
    opacity: 0.5;
}

<img src="http://placehold.it/380x250" />

html css

Answer 1

Answer №1

Instead of having a solid border, why not use a transparent border and then transition the border-color?

   img {
     width: 100%;
     max-width: 380px;
     border: 3px solid transparent;
     height: 100%;
     max-height: 250px;
     margin: 3px;
     border-radius: 15px;
     transition: opacity 2s ease, border-color 1s ease;
     opacity: 0.5;
   }
   img:hover {
     border-color: red;
   }

<img src="http://placehold.it/200x200" />

Answer 2

Instead of having a solid border, why not use a transparent border and then transition the border-color?

   img {
     width: 100%;
     max-width: 380px;
     border: 3px solid transparent;
     height: 100%;
     max-height: 250px;
     margin: 3px;
     border-radius: 15px;
     transition: opacity 2s ease, border-color 1s ease;
     opacity: 0.5;
   }
   img:hover {
     border-color: red;
   }

<img src="http://placehold.it/200x200" />

Answer 3

Answer №2

To avoid disrupting the layout when adding a border, you might want to consider using

box-shadow

instead of the border property, and then transition it.

$('.box').on('click', function() {
  $(this).addClass('box--checked');
});

.box {
  width: 120px;
  height: 120px;
  transition: box-shadow .3s linear;
  margin-bottom: 12px;
  background-color: #DDD;
  box-shadow: 0px 0px 0px 0px darkorange;
}
.box--checked {
  box-shadow: 0px 0px 0px 6px darkorange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box box--one">A</div>
<div class="box box--two">B</div>
<div class="box box--three">C</div>

Answer 4

To avoid disrupting the layout when adding a border, you might want to consider using

box-shadow

instead of the border property, and then transition it.

$('.box').on('click', function() {
  $(this).addClass('box--checked');
});

.box {
  width: 120px;
  height: 120px;
  transition: box-shadow .3s linear;
  margin-bottom: 12px;
  background-color: #DDD;
  box-shadow: 0px 0px 0px 0px darkorange;
}
.box--checked {
  box-shadow: 0px 0px 0px 6px darkorange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box box--one">A</div>
<div class="box box--two">B</div>
<div class="box box--three">C</div>

Smoothly reveal a border at the moment of transition

Answer №1

Answer №2

Similar questions

Preventing the use of double-click on Grooveshark

Steer clear of using grey backgrounds for anchors/links in IE 10

Problems arise when using AngularJS' .run function after navigating to a different page

Enabling auto-expansion for textareas with every keystroke

Reset a form input using jQuery

What accounts for the different behavior of line-height when using units vs percentage or em in this instance?

showcasing pictures on a .handlebars/html interface

Tips for extracting text from a textarea while retaining newline characters:

Issue with border-color in CSS on Chrome tables

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

increasing the size of the input thumb compared to the others

Encapsulate every list item with a <ul> tag using jQuery

Guide to positioning an image absolutely within a div

Manipulating Images with jQuery: Adding and Removing Images Without Affecting Text

Discovering hidden elements using Overflow:hidden

Tips for sending php data to javascript efficiently

When I employ ngroute, the Angular section in the html page does not display

How can I achieve a full-width stepper in Bootstrap?

Sending the most recent result to each dynamically created div

Shape with smoothed corners