Trying to add a left chevron on hover but the transition isn't working
div.bx-wrapper:hover div.bx-controls-direction::before{
content: "\f053";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 30px;
left: 0;
opacity: 1;
}
div.bx-wrapper div.bx-controls-direction::before{
opacity: 0;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
Don't know where i made mistakes
You should set all the CSS(including transition) on the default state of the selector and then only set opacity:1; on the hover state:
div.bx-wrapper div.bx-controls-direction::before{
content: "\f053";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 30px;
left: 0;
opacity:0;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
div.bx-wrapper:hover div.bx-controls-direction::before{
opacity:1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="bx-wrapper">
Hover Me
<div class="bx-controls-direction">FontAwesome</div>
</div>
Related
.btn.btn-decor {
min-width: 12.375rem;
color: #fff;
padding: .625rem;
background: #000;
border: none;
outline: none;
}
.btn {
-webkit-transition: color .3s linear,border-color .3s linear,background .3s linear;
transition: color .3s linear,border-color .3s linear,background .3s linear;
min-width: 11.1875rem;
font-family: sans-serif;
font-size: .6875rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
white-space: normal;
padding: 1.25rem .9375rem;
position: relative;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: .730rem;
line-height: 1.5;
border-radius: 0;
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn.btn-decor span {
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
display: block;
padding: 1.25rem .9375rem;
border-top: 2px solid #272726;
border-bottom: 2px solid #272726;
position: relative;
}
.btn.btn-decor span:before {
bottom: 0;
}
.btn.btn-decor span:after, .btn.btn-decor span:before {
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.375rem;
border-width: 0 2px;
border-style: solid;
border-color: #272726;
color: #272726;
}
.btn.btn-decor .icon-star:first-child {
left: -.25rem;
}
.btn.btn-decor .icon-star {
-webkit-transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,transform .4s linear;
transition: color .4s linear,transform .4s linear,-webkit-transform .4s linear;
width: .625rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0);
-ms-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
font-size: .625rem;
color: #272726;
}
[class*=" icon-"], [class^=icon-] {
font-family: icomoon!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn.btn-decor .icon-star:nth-child(2) {
right: -.25rem;
}
.btn.btn-decor .icon-star {
-webkit-transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,transform .4s linear;
transition: color .4s linear,transform .4s linear,-webkit-transform .4s linear;
width: .625rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0);
-ms-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
font-size: .625rem;
color: #272726;
}
[class*=" icon-"], [class^=icon-] {
font-family: icomoon!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn.btn-decor span:after {
top: 0;
}
.btn.btn-decor span:after, .btn.btn-decor span:before {
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.375rem;
border-width: 0 2px;
border-style: solid;
border-color: #272726;
color: #272726;
}
.icon-star:before {
content: url("");
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn.btn-decor.btn-decor-white:hover .icon-star,.btn.btn-decor:hover .icon-star {
-webkit-transform: translateY(-50%) rotate(360deg);
-ms-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
color: #4f4f4d
}
.offer-section .stars-bg .icon-star:first-child {
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.btn.btn-decor.btn-decor-white:hover span,.btn.btn-decor:hover span {
border-color: #4f4f4d
}
.btn.btn-decor.btn-decor-white:hover span:after,.btn.btn-decor.btn-decor-white:hover span:before,.btn.btn-decor:hover span:after,.btn.btn-decor:hover span:before {
border-color: #4f4f4d
}
<div>
<a -label="Link more" href="#" gv-link="link_3" class="btn btn-decor js-check-text sticky-link">
<span><i class="icon-star"></i>submit<i class="icon-star"></i></span>
</a>
</div>
enter image description here
When adding my button classes to the shortcode, it picks them up, but not correctly. Maybe because I have two classes "btn btn-decor" and "icon-star". What other options can there be, well, besides creating your own form, so that the button works in the created Contact Form 7?
How to create a reveal icon inside button on hover in TB3. I tried to mimic this behavior using CSS transitions and position property. But I essentially need is to have a separate background color for icon and button. Here is what I am doing right now.
HTML Markup
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
Download
</button>
CSS Code
.btn.icon-revealed > span {
left: -30px;
width: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
width: 20%;
-webkit-transform: translate(2em,0);
-moz-transform: translate(2em,0);
-o-transform: translate(2em,0);
-ms-transform: translate(2em,0);
}
What I want to Achieve
Notice the background color of icon and button changed on hover state. I could not able to do that. How can I achieve this in TB3?
Here's an alternative way that smooths out the transition.
.btn-dark {
border: none;
font-family: inherit;
font-size: inherit;
color: #fff;
background: none;
padding: 15px 30px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-dark:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-icon {
background: #4E7878;
color: #fff;
line-height: 20px;
font-size: 14px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-icon span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-icon:before {
background: #4A6B6B;
position: absolute;
height: 100%;
width: 30%;
line-height: 2.5;
font-size: 150%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-download:hover span {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
color: #fff;
}
.btn-download:before {
left: -100%;
top: 0;
}
.btn-download:hover:before {
left: 0%;
}
.icon-reveal:before {
content: "\e197";
font-family: 'Glyphicons Halflings';
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<button class="btn-dark btn-icon btn-download icon-reveal"><span> Download</span>
</button>
</div>
You can create that effect using multiple backgrounds with linear-gradient. Code explanantion in comments
.btn.icon-revealed {
margin: 10px; /* Added for SO snippet, not required */
width: 115px; /* Added fixed width for avoiding jump */
}
.btn.icon-revealed > span {
left: -40px;
width: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
width: 20%;
-webkit-transform: translate(2.5em, 0);
-moz-transform: translate(2.5em, 0);
-o-transform: translate(2.5em, 0);
-ms-transform: translate(2.5em, 0);
}
/* Added code */
.btn.icon-revealed {
background: #53777A;
color: #fff;
}
.btn.icon-revealed:hover {
background: linear-gradient(to right, #4B6B6E 0%, #4B6B6E 30%, #53777A 30%);
/* Start color---^, End at 30%-^, ^-- Start second color */
color: #fff;
}
.btn.icon-revealed:hover .text {
padding-left: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="text">Download</span>
</button>
I have been trying to make a simple drop down animation. I want it to push the other buttons down and display simple text. I got it to work, but I wanted a webkit tween just to jazz it up a bit and I can't seem to get it to work. I don't want to use absolute positioning because I am laying it out like an outline.
Here's a sample of the HTML
<div id="ngss-main" class="post">
<div class="infoblock">
<a class="topic">Forces and Interactions
<div class="inform">
<h5>What happens if you push or pull an object harder?</h5>
<ul>
<li>Pushes and pulls have different strengths and directions</li>
<li>Pushes and pulls start, stop, change speed or direction of an object*</li>
<ul>
</div>
</a>
</div>
<br>
<div class="infoblock">
<a class="topic">Interdependent Relationships in Ecosystems
<div class="inform">
<h5>Where do animals live and why do they live there?</h5>
<ul>
<li>Animals need food, plants need water and light to live and grow</li>
<li>Living things need water, air, and resources from their environment</li>
<li>Plants and animals can change their environment</li>
<ul>
</div>
</a>
</div>
</div>
Here's the important part. The CSS
.inform {
margin: 5px;
display: none;
color: black;
font-family: 'Helvetica', sans-serif;
border:10px solid rgb(114, 145, 63);
background-color: rgb(247, 145, 60);
position: relative;
width: 500px;
top: -200px;
-webkit-animation: slide 0.5s linear;
-moz-animation: slide 0.5s linear;
-0-animation: slide 0.5s linear;
animation: slide 0.5s linear;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.inform h5 {
font-style: italic;
font-style: bold;
font-size: 18px;
}
.topic {
font-family: 'Helvetica', sans-serif;
font-style: bold;
font-size: 24px;
color: rgb(53, 78, 155);
}
.topic li{
color: black;
font-style: normal;
font-size: 16px;
}
a:hover .inform {
display: block;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
#-webkit-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
#-moz-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
#-o-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
#keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
I know it's something stupid that I'm missing. Any help is greatly appreciated.
Seems like you're looking more for Transitions, not Animations:
.inform {
margin: 5px;
color: black;
font-family:'Helvetica', sans-serif;
border:10px solid rgb(114, 145, 63);
background-color: rgb(247, 145, 60);
position: absolute;
width: 500px;
top: -200px;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ktml-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.inform h5 {
font-style: italic;
font-style: bold;
font-size: 18px;
}
.topic {
font-family:'Helvetica', sans-serif;
font-style: bold;
font-size: 24px;
color: rgb(53, 78, 155);
}
.topic li {
color: black;
font-style: normal;
font-size: 16px;
}
a:hover .inform {
top: 200px;
-webkit-transition:all 1.0s ease-in-out;
-khtml-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
You may have figured it out by now, but anyway... Have you tried adding a pseudo :hover? If not, do so and set a value for height. Now, when you hover over, the container gets stretched down and reveals any additional stuff. May also require playing around with overflow.
have four items that just show a bg image until you hove and then it displays text, bg image is then set to none.
The first element is expanding beyond the height of the other three. I really just wanted them all to stay at 200x200px. All the images used for backgrounds are 200x200px.
Should the .p1top be positioned differently such as absolute?
.p1top {
height:200px;
margin-left:45px;
background-repeat: no-repeat;
background-image: url(protect.png);
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p1top :hover {
height:200px !important;
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top :hover {
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top {
background-repeat: no-repeat;
background-image: url(build.png);
float:left;
margin-left:-15px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
.p3top {
background-repeat: no-repeat;
background-image: url(savebg.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p3top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p4top {
background-repeat: no-repeat;
background-image: url(help.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p4top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
You have defined the height only in .p1top but not in other divs, so you need to set that's div height also. Then you could define position such as absolute but for this you should wrap all of these div with a div positioned relatively. If you post a jsfiddle that would be very much sensible.
I want to display menu points on my new homepage.
A menu point contains several elements -> Icon + Title + Description.
Those menu points should be links, so I just wrote a href in front of it.
It works, but it looks creepy, because it changes the background colour to grey. (Even if I declare it to white).
CSS
#font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
A { text-decoration: none; }
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover { text-decoration: none; }
A:focus { outline: none; }
.menuePoint {
width: 300px;
height: 70px;
position: relative;
display: inline-block;
float: none;
overflow: hidden;
text-align: left;
background: #fff;
padding-left: 10px;
}
.menuePointIcon {
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
float:left;
display:block;
text-shadow: 0px 0px 25px #0f76a6;
color: #0f76a6;
line-height: 66px;
width: 90px;
left: 0px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.menuePointTitle {
font-size: 25px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}
.menuePointDesc {
font-size: 18px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.menuePoint:hover .menuePointTitle {
opacity: 1;
color:#2676ac;
-webkit-animation:menuePointTitleAnimation 2s;
}
.menuePoint:hover .menuePointDesc {
-webkit-animation:menuePointDescAnimation 2s;
}
.menuePoint:hover .menuePointIcon {
font-size: 35px;
color: #0f76a6;
text-shadow: 0px 0px 20px #0f76a6;
opacity: 1;
}
#-webkit-keyframes menuePointTitleAnimation /* Safari and Chrome */
{
from {
-webkit-transform: translateX(110%);
}
50% {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes menuePointDescAnimation /* Safari and Chrome */
{
from {
-webkit-transform: translateX(-110%);
}
50% {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(0%);
}
}
HTML
<div style="text-align: center;">
<div class="menuePoint">
<div class="menuePointIcon">A</div>
<div class="menuePointTitle">Test</div>
<div class="menuePointDesc">Test</div>
</div>
<div class="menuePoint">
<div class="menuePointIcon">B</div>
<div class="menuePointTitle">WiFi</div>
<div class="menuePointDesc">Educ</div>
</div>
<a href="#">
<div class="menuePoint">
<div class="menuePointIcon">C</div>
<div class="menuePointTitle">Kontakt</div>
<div class="menuePointDesc">Email / Jobs</div>
</div>
</a>
</div>
Try specifying a border-width: 0px.