2

I have created the following section as part of a website I'm currently working on.

http://piclair.com/data/rarn7.jpg

When the social media icons below the job title are hovered over with the cursor, the CSS is supposed to generate a border around the icons individually, without affecting anything else on this entire section. However, upon the border appearing, the other gray boxes seem to be getting a margin-top-like effect to them.

This is what's described in the previous paragraph: http://piclair.com/data/djqpw.jpg

What I'm trying to achieve is the same effect as seen in the latter photo, only without the other div's being pushed down. The effect does look nice to some extent, but I would like to know what's causing it and how I would be able to avoid it.

This is the structure of one of those boxes, as an example:

<div class="container">
  <div class="row">

    <div class="col-span-3 crew-member">
      <img src="imgs/avatar1.jpg" alt="" class="img-circle">
      <div class="name">John Blue</div>
      <div class="job-title">Web & Graphics Designer</div>
      <div class="social-icons">
        <i class="fa fa-facebook-official"></i>
        <i class="fa fa-twitter-square"></i>
        <i class="fa fa-instagram"></i>
      </div>
    </div>

  </div>
</div>

And as requested, here is a JSFIDDLE with the hover problem: https://jsfiddle.net/c9zwecha/

Any help would be much appreciated.

Barry D.
  • 549
  • 2
  • 6
  • 21
  • 2
    Can you post your HTML **and** your CSS in ths snippet, or in a jsfiddle? Thanks.. – Joaquín O Sep 24 '15 at 22:38
  • This has nothing to do with your html, please provide your css and relevant javascript. – Adam Buchanan Smith Sep 24 '15 at 22:39
  • It is just up to the css. There can be 2 issues: 1. You've set the social_icons:hover{ margin-top } or -> 2. The margin of the child affects the entire parent element (maybe if you used display: table or something) –  Sep 24 '15 at 22:40
  • https://jsfiddle.net/c9zwecha/ though it's not a 100% duplicate, it's enough to solve the problem I'm having. – Barry D. Sep 24 '15 at 22:50

1 Answers1

1

Your problem is that each crew-member is displayed as inline-block. Then, when you hover the icon and increase it's size, the line-height of the full stuff is increased and the other members slide down.

To prevent this, you need to align every member to the top like this.

.who .crew-container .crew-member {
    vertical-align: top;
}

Here is the updated jsfiddle: https://jsfiddle.net/jormaechea/c9zwecha/1/

Joaquín O
  • 1,431
  • 1
  • 9
  • 16