CODEWITHSUNDEEP
buttonhover
saltedm8
saltedm8

Reputation: 3

Extend underline by hovering button in css

I have 3 services in a row, If you hover over each services title text, the underline gets longer under the corresponding title, What I want to do is make it so when you hover over the button or the title text, the line gets longer.

I would prefer a css solution if possible, I have tried the + (maybe wrongly) but it does not seem to be working for me

<div class="row ">

  <div class="col-xl-3 col-lg-4 ">

    <em>01</em>
    <a href=""><h2>Web Design</h2> </a>
    <p>Acro Design create research led websites that make you and your business money</p>
    <button>Explore Web Design</button>
  </div>
  <div class="col-xl-3  col-lg-4 ">
    <em>02</em>
    <a href="">
      <h2>Branding </h2>
    </a>
    <p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
  <div class="col-xl-3  col-lg-4 "><em>03</em> <a href=""><h2>Print Design</h2></a>
    <p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>


</div>


button {
  margin: 1rem 0 7rem 0;
  padding: 1.3rem;
  font-size: 1.2rem;
  font-style: italic;
  background-color: transparent;
  border: #000 solid 0.2rem;
  color: #000
}
  p {
  padding: 1rem 1rem 0rem 0;
}
em {
  display: block
}

h2 {
  text-decoration: none;
  display: inline-block;
  border-bottom: 3px solid black;
  white-space: nowrap;
  width: 6.429rem;
  transition: 0.5s ease;
  height: 5.357rem;
  color: #000;
}

h2:hover {
  border-bottom: 3px solid black;
  width: 200px;
  text-decoration: none;
}

}

http://codepen.io/saltedm8/pen/oxVNjO

Thank you REGARDS

Upvotes: 0

Views: 879

Answers (1)

Marko Mackic
Marko Mackic

Reputation: 2333

Here is a pen with solution : http://codepen.io/anon/pen/EKMxor. This includes javascript ( JQuery ) but there is no way to do it without css only.. You could say this is 50% hardware accelerated.

HTML: 

    <div class="row ">

      <div class="col-xl-3 col-lg-4 ">

        <em>01</em>
        <a href=""><h2>Web Design</h2> </a>
        <p>Acro Design create research led websites that make you and your business money</p>
        <button>Explore Web Design</button>
      </div>
      <div class="col-xl-3  col-lg-4 ">
        <em>02</em>
        <a href="">
          <h2>Branding </h2>
        </a>
        <p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
      <div class="col-xl-3  col-lg-4 "><em>03</em> <a href=""><h2>Print Design</h2></a>
        <p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>


    </div>
  </div>
</section>

CSS:

  p {
      padding: 1rem 1rem 0rem 0;
    }

    button {
      margin: 1rem 0 7rem 0;
      padding: 1.3rem;
      font-size: 1.2rem;
      font-style: italic;
      background-color: transparent;
      border: #000 solid 0.2rem;
      color: #000
    }

    em {
      display: block
    }

    h2 {
      text-decoration: none;
      display: inline-block;
      border-bottom: 3px solid black;
      white-space: nowrap;
      width: 6.429rem;
      transition: 0.5s ease;
      height: 5.357rem;
      color: #000;
    }
h2.active{
       border-bottom: 3px solid black;
      width: 200px;
      text-decoration: none;
}

JS :

$("h2").mouseover(function() {
  $(this).addClass("active");
});
$("h2").mouseout(function() {
  $(this).removeClass("active");
});
$("button").mouseover(function(){
  $(this).parent().children("a").children("h2").addClass("active");
});
$("button").mouseout(function(){
  $(this).parent().children("a").children("h2").removeClass("active");

});

Upvotes: 1

Related Questions