CODEWITHSUNDEEP
csshovercss-transitionstransitiononhover
LovinQuaQua
LovinQuaQua

Reputation: 123

transform bottom border on hover the outer div with css

i tried now for a long time to get this to work. the "line" under "Mehr erfahren" should go from 0% to 100% but i goes from 100% to 0%. Can anyone find the mistake?

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);
 
}


.lwb-col--link {
  	font-weight: 500;
	position: relative;
	display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
}
.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(0);
    transform-origin: left center;
}
<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

Upvotes: 0

Views: 152

Answers (2)

leofalmeida
leofalmeida

Reputation: 323

EDIT: I moved the border-bottom: 2px solid #E5E9EC; to .lwb-col--link, add a border-bottom: 2px solid #57B0FB; to .lwb-col:hover .lwb-col--link::after and use the transform property on the normal and hover. It works, but the border-bottom inital, doesn't disappear, it's just override.

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);
}

.lwb-col--link {
    font-weight: 500;
    position: relative;
    display: inline-block;
    border-bottom: 2px solid #E5E9EC;
}
.lwb-col--link::after{
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
    transform: scaleX(0);
}

.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
    border-bottom: 2px solid #57B0FB;
}
<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

Upvotes: 0

Turnip
Turnip

Reputation: 36712

Move transform: scaleX(0); to the default state.

Add transform: scaleX(1); to the hover state.

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);
 
}


.lwb-col--link {
  	font-weight: 500;
	position: relative;
	display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
    transform: scaleX(0);
}
.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
}
<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

Upvotes: 1

Related Questions