I am using some style I found on this website to create an underline slide in effect. Please see jsfiddle for example.
As you can see, the underline comes in from left to right. How would I go about making another line on top of the text, which transitions in from right to left? Could I simply adapt my current code snippet, or would I have to use a different method entirely?
.cmn-t-underline {
position: relative;
color: #ff3296;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-underline:hover {
color: #98004a;
}
.cmn-t-underline:hover:after {
width: 100%;
height:2px;
}
<h1 class="cmn-t-underline">Test</h1>
Try this , it work as you want
.cmn-t-underline {
position: relative;
color: #ff3296;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-underline:hover {
color: #98004a;
}
.cmn-t-underline:hover:after {
width: 100%;
height:2px;
}
.cmn-t-underline:hover:before {
width: 100%;
height:2px;
}
.cmn-t-underline:before {
display: block;
position: absolute;
right: 0;
top: 0px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
<h1 class="cmn-t-underline">Test</h1>
http://jsfiddle.net/juhL2256/1/
Change left to right.
.cmn-t-underline:after {
display: block;
position: absolute;
right: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
Related
I'm trying to replicate something I saw on another site, but currently my before element is hiding my text. Is there anything I can do to fix it?
This is the example:
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
Add a negative z-index to push that layer below the "parent".
body {
margin: 20px;
}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1; /* this here */
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
use z-index to see the text
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
Add z-index: -1 to :before pseudo element.
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
Simple. Add z-index:-1; in #hello:before.
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index:-1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
You can fix that by adding a z-index: -1 on the before element
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
z-index: 1;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
I want a Button, with 2 elements in it, to slide the Background.
But I want both elements to center vertical and get height 100% even when the other element is bigger.
Here is the HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
And here the CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
Demo
FIDDLE
Can you help me? :(
Is this what you had in mind?
https://jsfiddle.net/e07uc4kj/9/
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
padding: 10px;
min-width: 80px;
position: absolute;
top: 0px;
bottom: 0px;
text-decoration: none;
background: #474f54;
color: #fff;
vertical-align: middle;
}
.btn-cstm-slide-text {
margin-left: 100px;
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}
this question is a follow on from my previous question.
I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle.
My previous question was asking how to adapt this so the line came in from right to left, and on top of the text, please see example on this jsfiddle.
My next step is to add both of these to one element, so one line slides in from left to right on the bottom, and the other right to left on top.
When I tried to add both of these together, it seems to only display the top one, please see this jsfiddle.
My question is how do I add both the top slide in line and the bottom slide in line to an element?
.cmn-t-underline {
position: relative;
color: #ff3296;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-underline:hover {
color: #98004a;
}
.cmn-t-underline:hover:after {
width: 100%;
height:2px;
}
.cmn-t-overline {
position: relative;
color: #ff3296;
}
.cmn-t-overline:after {
display: block;
position: absolute;
right: 0;
top: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-overline:hover {
color: #98004a;
}
.cmn-t-overline:hover:after {
width: 100%;
height:2px;
}
<h1 class="cmn-t-underline cmn-t-overline">Test</h1>
You have to make use of :before for your top line, and :after for your bottom line.
The way you are doing it the second ":after" overrides the first so you end up with only one line.
I have edited your jsFiddle :
http://jsfiddle.net/7k4rLdno/
I only changed the second :after with :before and everything works well.
You can't have two :after or two :before the the exact same element.
use
:before - top line
:after - bottom line
h1{
position: relative;
color: #ff3296;
}
h1:before,
h1:after {
display: block;
position: absolute;
width: 0;
height: 10px;
background-color: #2E9AFE;
content:"";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
h1:before {
left: 0;
top: -10px;
}
h1:after {
right: 0;
bottom: -10px;
}
h1:hover {
color: #98004a;
}
h1:hover:after,
h1:hover:before {
width: 100%;
height:2px;
}
<h1>Test</h1>
Fiddle
i have a code HTML CODE:
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
<ul class="dropdown">
<li><i class="icon-twitter icon-large"></i>Twitter</li>
<li><i class="icon-github icon-large"></i>Github</li>
<li><i class="icon-facebook icon-large"></i>Facebook</li>
</ul>
</div>
</div>
AND CSS:
.wrapper-dropdown-2 {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
background: #fff;
border-left: 5px solid orange;
cursor: pointer;
text-align: left;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.dropdown {
display:none;
}
.wrapper-dropdown-2:hover ul.dropdown {
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
http://jsfiddle.net/pvt3e/
and i try, in hover mouse to: Sign in with open the drop down but its not work !
i cant work with js. Because I have a problem with 1.8.2, but I think we can find a solution with CSS
try this
.wrapper-dropdown-2:hover ul{
display:block;
}
updated jsFiddle File
also remove .dropdown:hover from your style
You are missing to add hover code to see drop down when hover over. add css for hover.
.wrapper-dropdown-2:hover .dropdown
{
display:block;
}
Live Demo
Just Replace Your This CSS
.dropdown:hover {
/* Size & position */
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
/* Styles */
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
To My CSS and Get Result
.wrapper-dropdown-2:hover > .dropdown {
position: absolute;
display:block;
left: -45px;
background: white;
top:24px;
}
You will need to initialize your javascript as well as link to jquery. I see you are using a dropdown from Codrops why dont you just download the source?