I have this code from the Hover.css pack:
.hvr-underline-from-left{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #0F9E5E;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover::before, .hvr-underline-from-left:focus::before, .hvr-underline-from-left:active::before {
right: 0;
}
What this does is that it adds a buttom border to a button that appeares from the left on hover.
But the effect i want is this, but multible times. So this should be added multible times with 0.1s delay every time, and an other color. How would i do this?
I tried using ::before(n) but it didn't work.
You can use after pseudo class to get the double underline effect.
//same as before class except for transition delay and bottom position you can adjust that as needed
.hvr-underline-from-left::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 10px;
background: #0F9E5E;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
// on hover effect for after same as before class.
.hvr-underline-from-left:hover::after,
.hvr-underline-from-left:focus::after,
.hvr-underline-from-left:active::after {
right: 0;
}
//to add more
.hvr-underline-from-left .hvr-underline-from-left{
position:absolute;
height:100%;
width:100%;
background:transparent;
top:0;
left:0;
z-index:1000;
}
.hvr-underline-from-left .hvr-underline-from-left:after{
bottom:20px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-underline-from-left .hvr-underline-from-left:before{
bottom:30px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
// and div tags look like this
<div class="hvr-underline-from-left">
<div class="hvr-underline-from-left">
</div>
</div>
****Please be careful once you give the inner container z-index and bring it to the front with 100% height and width any elements inside the main container might not be clickable.
Alternatively You can use css animation keyword for getting this multiple times underline effect with different color.and Adjust time according to your need. eg
.hvr-underline-from-left{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover::before {
animation:colorUnderline 2s;
animation-fill-mode: forwards;
}
#keyframes colorUnderline{
0%{
right:100%;
background: #0F9E5E;
}
25%{
background: #0F9E5E;
right:0;
}
26%{
background: #8e44ad ;
right:100%;
}
50%{
background: #8e44ad ;
right:0;
}
51%{
background: #e74c3c ;
right:100%;
}
75%{
background: #e74c3c ;
right:0;
}
76%{
background: #f1c40f ;
right:100%;
}
100%{
right:0;
background: #f1c40f ;
}
}
<body>
<div class="hvr-underline-from-left">Test</div>
</body>
Related
I tried some hover effects from here and I tried to put the radial out effect on to a circle (border-radius: 50%) but there is a rectangle showing up for a brief moment when you actually hover over the circle.
my code:
button {
background: #F0F1F2;
border: none;
cursor: pointer;
border-radius: 50%;
width: 100px;
height: 100px;
}
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
<button class="hvr-radial-out">Test</button>
When click the button, there is a square border. I guess that you want to remove it. So add outline:0;
button {
background: #F0F1F2;
border: none;
cursor: pointer;
border-radius: 50%;
width: 100px;
height: 100px;
outline: 0;
}
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
<button class="hvr-radial-out">Test</button>
It might be because of border: none property you have used on button
You are using both border-radius: 50%; and border: 1px; which might be contradicting each other.
Please try with having border: 1px;
I've got a problem with the navigation of my website. There's a button defined with "display: inline;", because otherwise the buttons wouldn't appear horizontal to each other.
Then I have a animation, a hover effect. There it has to be "display: inline-block;", because Firefox wouldn't play the animation without that.
The problem is that I've defined "display: inline;" first, so Firefox just ignores "display: inline-block;" and the animation doesn't play. The problem is only in Firefox, not in Chrome and not even in IE.
So here's the HTML-code:
<div id="nav">
<li class="sweep">PROJECTS</li>
</div>
And here's the CSS:
#nav {
float: right;
width: auto;
font-size: 25px;
margin: 12px 10px 0px 0px;
}
#nav li {
list-style-type: none;
display: inline;
margin-right: 20px;
padding: 5px 10px 5px 10px;
}
#nav a {
text-decoration: none;
color: #3a96d3;
}
.sweep {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.sweep:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3a96d3;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sweep:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
color: white;
}
.sweep:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
Thanks for your answers!
It shouldn't make a difference if you set #nav li also to display: inline-block;
I am trying to increase the hit area of the link in the menu but doing so also increases the underline effect of the text. I have tried padding and width but no imrprovement. I want a effect just like the one present in highfive mobile menu(Underline from left). Here is the fiddle and Here is the code
.hvr-underline-from-left {
text-decoration:none;
padding: 3px 0;
color: #000;
cursor: pointer;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom : 7px;
background: #E13F3F;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
right: 0;
}
<html>
<body>
<a class="hvr-underline-from-left" href="#">About </a>
</body>
</html>
You could add a span within the a-tag and put the underline effect on the span instead.
This way you can add padding to your link element without it affecting the underline effect.
a {
padding: 20px;
display: inline-block;
background: #eee;
}
.hvr-underline-from-left {
text-decoration: none;
padding: 3px 0;
color: #000;
cursor: pointer;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 7px;
background: #E13F3F;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a:hover .hvr-underline-from-left:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:active:before {
right: 0;
}
<html>
<body>
<span class="hvr-underline-from-left">About</span>
</body>
</html>
I was playing around with some CSS transitions, and trying to figure this out. I would like the text color to change (from left to right) INSTEAD of the background.
Here is the code: (codepen here: http://codepen.io/xkurohatox/pen/zGboMz)
HTML:
View Cart
CSS:
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
color: white;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
I already tried the obvious, such as changing background-color to color and playing around with translateZ. I don't think I've ever seen a css font color transition before so I would LOVE to see if anyone here is talented enough to come up with one.
Got the base code from here: https://github.com/IanLunn/Hover
Thank you in advance xx :)
It absolutely can be done using a little bit of trickery. Here's a working example that uses a mask to reveal the colored text.
Codepen: http://codepen.io/maxlaumeister/pen/eNXBaW
Live Demo:
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.mask {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0px;
overflow: hidden;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
text-shadow:
-1px -1px 0 red,
1px -1px 0 red,
-1px 1px 0 red,
1px 1px 0 red;
}
.mask a.added_to_cart.wc-forward {
color: red;
}
#container:hover .mask {
width: 500px;
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
body {
margin: 0;
}
a.added_to_cart.wc-forward.under {
position: absolute;
left: 0;
top: 0;
}
#inner {
width: 500px;
}
<div id="container">
View Cart
<div class="mask">
<div id="inner">
View Cart
</div>
</div>
</div>
I removed background color from a.added_to_cart.wc-forward:before
CSS
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
color: red;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
HTML
View Cart
Demo here
Created a LightBox effect using pure CSS and HTML, no JS. The image appears, but on the right side of the screen, halfway cut off, and partially underneath my Nav bar. Half of the screen is shaded behind the image.
It appears like it would work, aside from it being off-center and behind the navigation. From the code at hand, is there anything that appears it could be doing this? I'd be happy to post more code if necessary. Thank you!
/*Eliminates padding, centers the thumbnail */
body,
html {
padding: 0;
margin: 0;
text-align: center;
float: left;
}
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
clear: both;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
<div id="gravel-button">
<a class="lightbox" href="#gravel-1">
<h7>Photo & Info</h7>
</a>
</div>
<div class="lightbox-target" id="gravel-1">
<img src="http://www.sbsg.com/wp-content/uploads/2010/02/58minus.jpg">
<a class="lightbox-close"></a>
</div>