CODEWITHSUNDEEP
htmlcsscss-transitions
Solace
Solace

Reputation: 9020

Why do the sibling elements as well as the parent element move when a transition is applied to an <a> element?

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
details,
summary {
  display: block;
}
section.body-wrapper {
  position: relative;
  background-color: teal;
  width: 100%;
  min-width: 960px;
}
div.fixed-width {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px;
}
.everything-wrapper p.desc-para {
  font-size: 18px;
  width: 460px;
  margin: 0 auto;
  padding: 40px 0px 27px;
}
div.links-wrapper {
  background-color: black;
  padding: 20px 0px 50px;
  margin: 0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 25px;
}
.a-link {
  display: table-cell;
  text-decoration: none;
}
div.the-div {
  font: 0px/0 a;
  border: coral 2px solid;
  height: 140px;
  width: 140px;
  transition: all 0.3s ease 0s
}
.the-div:hover {
  background-color: grey;
  border: coral 6px solid;
}
.caption {
  font-family: sans-serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease 0s;
}
.caption:hover {
  color: cyan;
  font-weight: 200;
}
<section class="body-wrapper">



  <div class="everything-wrapper fixed-width">
    <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <div class="links-wrapper">

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

    </div>
    <!-- .links-wrapper -->

  </div>
  <!-- .everything-wrapper -->



</section>
<!-- .body-wrapper -->

In this SSCCE, when the transition is applied on .a_link when the mouse hovers over it (a.a_link:hover {...}), it moves as expected, but all of its siblings as well as its container also move. I want the siblings and the container and everything except itself to remain static/at-its-place and just this element should move on which the transition is applied. How can I achieve that?

Upvotes: 0

Views: 155

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99504

Why do the sibling elements as well as the parent element move when a transition is applied to an <a> element?

That's because changing border width of an element alters the computed width/height of that element by default.

On the other hand, elements within table cells are aligned vertically to the middle by default.

Therefore altering the border width of an element within a cell affects the width/height of that cell and the other cells and respectively the alignment of the other elements.

I want the siblings and the container and everything except itself to remain static/at-its-place and just this element should move on which the transition is applied. How can I achieve that?

Well there are multiple options to achieve that, but one of the most simple ones (considering the current stylesheet) is altering the box-sizing of div elements and aligning the elements in table cells at the top:

.a-link { vertical-align: top }
.the-div { box-sizing: border-box }

box-sizing: border-box changes the default CSS box model to calculate widths and heights of elements including borders and padding but not margin.

6.1. ‘box-sizing’ property

border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height.

Putting all together

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
details,
summary {
  display: block;
}
section.body-wrapper {
  position: relative;
  background-color: teal;
  width: 100%;
  min-width: 960px;
}
div.fixed-width {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px;
}
.everything-wrapper p.desc-para {
  font-size: 18px;
  width: 460px;
  margin: 0 auto;
  padding: 40px 0px 27px;
}
div.links-wrapper {
  background-color: black;
  padding: 20px 0px 50px;
  margin: 0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 25px;
}
.a-link {
  display: table-cell;
  text-decoration: none;
  vertical-align: top;
}
div.the-div {
  font: 0px/0 a;
  border: coral 2px solid;
  height: 140px;
  width: 140px;
  box-sizing: border-box;
  transition: all 0.3s ease 0s
}
.the-div:hover {
  background-color: grey;
  border: coral 6px solid;
}
.caption {
  font-family: sans-serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease 0s;
}
.caption:hover {
  color: cyan;
  font-weight: 200;
}
<section class="body-wrapper">
  <div class="everything-wrapper fixed-width">
    <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <div class="links-wrapper">

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

    </div>
    <!-- .links-wrapper -->

  </div>
  <!-- .everything-wrapper -->
</section>
<!-- .body-wrapper -->

Alternatively we could give the hovered div a (inset) box-shadow which doesn't affect the box model unlike border. Yo might want to consider.

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
details,
summary {
  display: block;
}
section.body-wrapper {
  position: relative;
  background-color: teal;
  width: 100%;
  min-width: 960px;
}
div.fixed-width {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px;
}
.everything-wrapper p.desc-para {
  font-size: 18px;
  width: 460px;
  margin: 0 auto;
  padding: 40px 0px 27px;
}
div.links-wrapper {
  background-color: black;
  padding: 20px 0px 50px;
  margin: 0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 25px;
}
.a-link {
  display: table-cell;
  text-decoration: none;
}
div.the-div {
  font: 0px/0 a;
  box-shadow: inset 0 0 0 2px coral;
  height: 140px;
  width: 140px;
  transition: all .3s ease 0s;
}
.the-div:hover {
  background-color: grey;
  box-shadow: inset 0 0 0 6px coral;
}
.caption {
  font-family: sans-serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease 0s;
}
.caption:hover {
  color: cyan;
  font-weight: 200;
}
<section class="body-wrapper">
  <div class="everything-wrapper fixed-width">
    <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <div class="links-wrapper">

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

    </div>
    <!-- .links-wrapper -->

  </div>
  <!-- .everything-wrapper -->
</section>
<!-- .body-wrapper -->

Upvotes: 1

Ismail Farooq
Ismail Farooq

Reputation: 6837

why don't you try CSS after

try this code

div.the-div {  font: 0px/0 a;  height: 140px;  width: 140px;  position:relative;}
div.the-div:after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
border: coral 2px solid;
z-index:1;
transition: all 0.3s ease 0s;
box-sizing:border-box;
}
.the-div:hover{  background-color: grey;}
.the-div:hover:after {  border: coral 6px solid;}

paste the above code between .a-link and .caption

Upvotes: 1

Josh Warren
Josh Warren

Reputation: 306

You could do:

div.the-div {
    padding: 4px
}

div.the-div:hover {
    padding: 0;
}

But transitioning both padding and border at the same isn't too smooth. Alternatively, you could structure the HTML like this:

<a class="a-link" href="#">
    <div class="div-wrap">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    </div>  
    <p class="caption">Strangler Wrangler</p>
 </a>

and then add this CSS:

 .div-wrap {
    border: 4px solid transparent;
    transition: all 0.3s ease;
 }

 .div-wrap:hover {
    border: 4px solid coral;
 }

Removing:

 .the-div:hover {
    border: coral 6px solid;
 }

Upvotes: 2

Related Questions