CODEWITHSUNDEEP
htmlcsshover
Dev pokhariya
Dev pokhariya

Reputation: 346

Div resizing on hover css?

On hover the text is resizing with div i only want to increase the size of border and nothing else but here it is also resizing the window of div can anyone help me in this. Is there anything i could do so that my div and the text remains static but the border size changes to 3px . Also i want to do it in css not with js just plain css. Anyone help me out like which tag should i use and which class . is this happening because of bootstrap i had used or what is the main problem why m i getting this error i don't know. if anyone can help this will be great help for me as i have to finish this.

Here is a snippet:

.org-text-box {
  padding: 25px 9px 13px 29px;
  width: 290px;
  display: inline-block;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(204, 204, 204, 1);
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.org-text-box:hover {
  border-width: 3px;
  border-color: rgba(4, 27, 71, 1);
}
<div class="col-md-2 org-text-box">
  <div class="col-md-12">
    <span style="font-size:14px;font-weight:700;text-align:center; line-height:20px;"><center>Unité de Conseil et d’audit interne (UCAI)</center></span>
  </div>
  <div class="" style="font-size:14px; font-weight:400; margin-top:50px; ">
    <center>
      <span>L'Unité de Conseil et d'Audit Interne a pour attributions principales d'assurer l'audit interne de l'IGF et de donner suite à tout mandat ponctuel confié par le Ministre de l'Économie et des Finances ou son délégataire. Elle procède également à l’évaluation des politiques publiques.
    </span>
      <span style="font-weight:700;font-style:italic;">(cf. Article 12 du décret du 17 mars 2006)</span>
    </center>
  </div>
</div>

Upvotes: 0

Views: 78

Answers (2)

GuCier
GuCier

Reputation: 7425

If you want to use borders, you can play with the border-color only :

div {
  border: 5px solid transparent;
  padding: 10px;
  background-color: #eaeaea;
}

div:hover {
  border-color: black;
}
<div>Yep yep yep yep</div>

Alternatively, you can use outline as it doesn't affect the element size.

div {
  padding: 10px;
  background-color: #eaeaea;
}

div:hover {
  outline: 5px solid black;
}
<div>Yep yep yep yep</div>

Upvotes: 1

Turnip
Turnip

Reputation: 36742

Borders effect the element dimensions which is why you see the element move. One way to avoid this is to use an inset box-shadow with zero pixel blur and two pixel spread to simulate the look of a border:

.org-text-box {
  padding: 25px 9px 13px 29px;
  width: 290px;
  display: inline-block;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(204, 204, 204, 1);
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.org-text-box:hover {
  border-color: rgba(4, 27, 71, 1);
  box-shadow: inset 0 0 0 2px rgba(4, 27, 71, 1);
}
<div class="col-md-2 org-text-box">
  <div class="col-md-12">
    <span style="font-size:14px;font-weight:700;text-align:center;
             line-height:20px;">
             <center> Unité de Conseil et d’audit interne (UCAI)</center>
            	</span>
  </div>
  <div class="" style="font-size:14px; font-weight:400; 
                  margin-top:50px; ">
    <center> <span>
            L'Unité de Conseil et d'Audit Interne a pour attributions principales d'assurer l'audit interne de l'IGF et de donner suite à tout mandat ponctuel confié par le Ministre de l'Économie et des Finances ou son délégataire. Elle procède également à l’évaluation des politiques publiques.
    </span>
      <span style="font-weight:700;font-style:italic;"> 
                   (cf. Article 12 du décret du 17 mars 2006)</span>
    </center>
  </div>
</div>

Upvotes: 2

Related Questions