Looking for a way to slide a bottom border between divs

Question

I am looking for a way to to slide the border bottom to when the mouse hovers each image. At present, when I click each image, the border bottom class is removed from the others and added to the clicked one. Is there a way to animate it to a sliding effect?

Image of website area

Code: https://jsfiddle.net/PeterR/dbbwfbws/

$(document).ready(function () {
        $("#feature1").addClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature1").click(function () {
        $("#feature1").addClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature2").click(function () {
        $("#feature1").removeClass("iconunderline");
        $("#feature2").addClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature3").click(function () {
        $("#feature1").removeClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").addClass("iconunderline");
    })

The bottom border currently moves on hover, at least on Chrome/Windows: https://jsfiddle.net/dbbwfbws/3 — GAntoine, Jan 04 '16 at 22:56
This answer to [this question](http://stackoverflow.com/questions/17212094/fill-background-color-left-to-right-css) provides one method of adding a sliding effect to non-image backgrounds. — Stryner, Jan 04 '16 at 23:01

score 0 · Answer 1 · answered Jan 05 '16 at 00:03

Here is a css approach

#section2{
 width: 100%;
 height: 650px;
 /*background-color: #f5f7f9;*/
 position:relative;
    background-color:#e15915;
}

#section2:after{
 content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

#section2-container{
 margin: 0 auto;
 width: 1100px;
}

#features-images{
 margin: 0 auto;
 width: 632px;
 

}

.featureicon{
  position:relative;
 margin-top: 50px;
 width: 175px;
 height: 175px;
  display: inline-block;
  overflow:visible;
   border:solid;
   
}

.featureiconimage{
  position:absolute;
 width: 100%;
  padding-bottom:0px;
  transition-property:padding,border;
  transition-duration:0.5s;
  -moz-transition-property:padding,border;
  -moz-transition-duration:0.5s;
  -webkit-transition-property:padding,border;
  -webkit-transition-duration:0.5s;
  -ms-transition-property:padding,border;
  -ms-transition-duration:0.5s;
}

#feature2{
 margin-left: 50px;
 margin-right: 50px;
}

.featureiconimage:hover{
 cursor: pointer;
 padding-bottom:20px;
  border-bottom: 5px solid white;
  
  
}

<div id="section2">
  <div id="features-images">  
    <div class="featureicon" id="feature1">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
    <div class="featureicon" id="feature2">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
    <div class="featureicon" id="feature3">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
</div>
</div>
</div>

Note: I most of the prefixes for the transition property. You can add the rest :D

Looking for a way to slide a bottom border between divs

1 Answers1