CODEWITHSUNDEEP
htmlcss
athi
athi

Reputation: 1683

Lines not overlapping as expected

In the below code, I have 2 sections with a common border initially and while hovering each section, I want each section to be highlighted with a border. I want the lines to overlap. Please help.

.slides li {
  list-style-type: none;
  width: 48%;
  float: left;
  padding: 1%;
}

.slides li:hover {
  border-top: solid 4px red;
}

.slides {
  border-top: solid 3px #979797;
}
<ul class="slides">
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitm vehicula commodo. Nam consectetur augue ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>

</ul>

Upvotes: 0

Views: 43

Answers (3)

pixlboy
pixlboy

Reputation: 1502

You can keep negative margin along with a transparent border-top on each li element.

There is a transition effect also applied in solution.

.slides li {
  list-style-type: none;
  width: 48%;
  float: left;
  padding: 1%;
  transition: .7s all;
  border-top: solid 3px transparent;
  margin-top: -3px;
}

.slides li:hover {
  border-top: solid 3px red;
}

.slides {
  border-top: solid 3px #979797;
}
<ul class="slides">
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitm vehicula commodo. Nam consectetur augue ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>

</ul>

Upvotes: 0

Mittal Patel
Mittal Patel

Reputation: 2762

Apply the gery border on li itself.

.slides li {
  list-style-type: none;
  width: 48%;
  float: left;
  padding: 1%;
  border-top: solid 3px #979797; 
}

.slides li:hover {
  border-top: solid 4px red;
}
<ul class="slides">
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitm vehicula commodo. Nam consectetur augue ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>

</ul>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Apply the same pixel border for hover and add negative margin top when the hover happened like margin-top:-3px:. So this will fix the overlay.

.slides li {
  list-style-type: none;
  width: 48%;
  float: left;
  padding: 1%;
}

.slides li:hover {
  border-top: solid 3px red;
  margin-top:-3px;
}

.slides {
  border-top: solid 3px #979797;
}
<ul class="slides">
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>
  <li>
    <div class="slider-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitm vehicula commodo. Nam consectetur augue ut sapien cursus, non posuere sapien sagit.</p>
    </div>
  </li>

</ul>

Upvotes: 1

Related Questions