I am trying to slide up an element on a button click with css property transfrom: translate3d(0,-100px,0); but the element below having relative position is no sliding up with that element leaving some space.
First Container CSS Properties:
.setupContainer {
position: relative;
display: inline-block;
width: 100%;
height: 100px;
text-align: center;
background-color: rgba(23, 29, 97, 0.9);
color: #FFF;
cursor: default;
z-index: 1;
-webkit-transform: translate3d(0,-100px,0);
-moz-transform: translate3d(0,-100px,0);
-ms-transform: translate3d(0,-100px,0);
-o-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
Second Container Css Properties:
.top_header {
position: relative;
width: 98%;
height: 165px;
background: #FFF;
margin: 0 auto;
float: none;
clear: both;
top: 1%;
text-align: center;
margin-bottom: 3px;
border-bottom: 2px solid #8CC5A7;
}
Related
I am trying to use below buttons for my web pages. How to use it for setting hyper link in these buttons ?
#import url('http://fonts.googleapis.com/css?family=Roboto+Condensed');
.preserve-3d {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
body {
padding: 0;
margin: 0;
border: 0;
overflow-x: none;
background-color: #ffffff;
font-family: Roboto Condensed, sans-serif;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
}
.back {
width: 33%;
height: 200px;
float: left;
background-color: #eeeeee;
border: 10px;
border-color: #ffffff;
border-style: solid;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
counter-increment: bc;
padding: 0px 5px 5px 5px;
}
.back:before {
content: counter(bc) "_";
position: absolute;
padding: 10px;
}
#media screen and (max-width: 1260px) {
.back {
width: 50%;
}
}
#media screen and (max-width: 840px) {
.back {
width: 100%;
}
}
.button_base {
margin: 0;
border: 0;
font-size: 18px;
position: relative;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
width: 200px;
height: 50px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-user-select: none;
cursor: default;
}
.button_base:hover {
cursor: pointer;
}
/* ### ### ### 01 */
.b01_simple_rollover {
color: #000000;
border: #000000 solid 1px;
padding: 10px;
background-color: #ffffff;
}
.b01_simple_rollover:hover {
color: #ffffff;
background-color: #000000;
}
/* ### ### ### 02 */
.b02_slide_in {
overflow: hidden;
border: #000000 solid 1px;
}
.b02_slide_in div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
}
.b02_slide_in div:nth-child(1) {
color: #000000;
background-color: #ffffff;
}
.b02_slide_in div:nth-child(2) {
background-color: #000000;
transition: top 0.1s ease;
-webkit-transition: top 0.1s ease;
-moz-transition: top 0.1s ease;
top: -50px;
}
.b02_slide_in div:nth-child(3) {
color: #ffffff;
transition: opacity 0.1s ease;
-webkit-transition: opacity 0.1s ease;
-moz-transition: opacity 0.1s ease;
opacity: 0;
}
.b02_slide_in:hover div:nth-child(2) {
top: 0px;
transition: top 0.1s ease;
-webkit-transition: top 0.1s ease;
-moz-transition: top 0.1s ease;
}
.b02_slide_in:hover div:nth-child(3) {
opacity: 1;
transition: opacity 0.1s ease;
-webkit-transition: opacity 0.1s ease;
-moz-transition: opacity 0.1s ease;
}
/* ### ### ### 03 */
.b03_skewed_slide_in {
overflow: hidden;
border: #000000 solid 1px;
}
.b03_skewed_slide_in div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
}
.b03_skewed_slide_in div:nth-child(1) {
color: #000000;
background-color: #ffffff;
}
.b03_skewed_slide_in div:nth-child(2) {
background-color: #000000;
width: 230px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: translate(-250px, 0px) skewX(-30deg);
-webkit-transform: translate(-250px, 0px) skewX(-30deg);
-moz-transform: translate(-250px, 0px) skewX(-30deg);
}
.b03_skewed_slide_in div:nth-child(3) {
color: #ffffff;
left: -200px;
transition: left 0.2s ease;
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
}
.b03_skewed_slide_in:hover div:nth-child(2) {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transform: translate(-15px, 0px) skewX(-30deg);
-webkit-transform: translate(-15px, 0px) skewX(-30deg);
-moz-transform: translate(-15px, 0px) skewX(-30deg);
}
.b03_skewed_slide_in:hover div:nth-child(3) {
left: 0px;
transition: left 0.30000000000000004s ease;
-webkit-transition: left 0.30000000000000004s ease;
-moz-transition: left 0.30000000000000004s ease;
}
/* ### ### ### 04 */
.b04_3d_tick {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
perspective-origin: center top;
-webkit-perspective-origin: center top;
-moz-perspective-origin: center top;
}
.b04_3d_tick div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
border: #000000 solid 1px;
}
.b04_3d_tick div:nth-child(1) {
color: #000000;
background-color: #ffffff;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}
.b04_3d_tick div:nth-child(2) {
color: #ffffff;
background-color: #000000;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
}
.b04_3d_tick:hover div:nth-child(1) {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
background-color: rgba(0, 0, 0, 0.5);
}
.b04_3d_tick:hover div:nth-child(2) {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
/* ### ### ### 05 */
.b05_3d_roll {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
.b05_3d_roll div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
padding: 10px;
border: #000000 solid 1px;
pointer-events: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.b05_3d_roll div:nth-child(1) {
color: #000000;
background-color: #000000;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: 50% 50% -25px;
-webkit-transform-origin: 50% 50% -25px;
-moz-transform-origin: 50% 50% -25px;
}
.b05_3d_roll div:nth-child(2) {
color: #000000;
background-color: #ffffff;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: 50% 50% -25px;
-webkit-transform-origin: 50% 50% -25px;
-moz-transform-origin: 50% 50% -25px;
}
.b05_3d_roll:hover div:nth-child(1) {
color: #ffffff;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
.b05_3d_roll:hover div:nth-child(2) {
background-color: #000000;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
}
/* ### ### ### 06 */
.b06_3d_swap {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
<div class="back">
<div class="button_base b02_slide_in">
<div>01_Button</div>
<div></div>
<div>01_Button</div>
</div>
</div>
<div class="back">
<div class="button_base b03_skewed_slide_in">
<div>01_Button</div>
<div></div>
<div>01_Button</div>
</div>
</div>
<div class="back">
<div class="button_base b04_3d_tick">
<div>01_Button</div>
<div>01_Button</div>
</div>
</div>
<div class="back">
<div class="button_base b05_3d_roll">
<div>02_Button</div>
<div>01_Button</div>
</div>
</div>
I want to use these buttons as link for download button. How to use it for setting hyper link in these buttons ? Any help will be appreciated.
You can replace button with an a tag and style it like a button, like this:
01_Button
EDIT: Sorry I didn't see you were using divs. Add you link inside the div, like this:
<div class="button-style">01_Button</div>
<div class="button_base b02_slide_in">
<div>01_Button</div>
<div></div>
<div><a class="link" href="#">01_Button</a></div>
</div>
<style>
.link:hover
{
color:#fff;
text-decoration: none;
}
</style
I already succeed to added the transition effect when hover the cursor to drop-down menu (click the "M" logo) in my own wordpress theme but when the cursor being away from drop-down menu don't show the transition effect when closing. You can check out my own theme on this link for further info.
Here drop-down css style:
.dropdown-menu {
border-bottom-right-radius: 77px;
border-bottom-left-radius: 77px;
/* background: url(img/submenu.png) no-repeat scroll right/ 91% 100%; */
position: absolute;
height:0;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 153px;
padding: 1px 0;
margin: 2px 0 0 0;
list-style: none;
font-size: 14px;
text-align: center;
background-color: transparent!important;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.15);
background-clip: padding-box;
opacity: 0;
top: 35px;
visibility: hidden;
-webkit-transition:height 300ms ease-in;
-moz-transition:height 300ms ease-in;
-ms-transition: height 300ms ease-in;
-o-transition:height 300ms ease-in;
transition:height 300ms ease-in;
overflow: hidden;
}
.navbar-nav li:hover .dropdown-menu {
opacity: 1;
top: 105px;
visibility: visible;
height:300px;
}
So How I can add the transition effect when drop-down menu closing?
Instead of transitioning only the height you could try
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
This CSS "animation" in essence consist of several transitions and transforms on span:nth-children which follow each other sequentially using transition delays. It works fine one way, but what is the best way to reverse the animation? Since it is a sequence the solution should reverse the entire sequence. See fiddle for example:
http://jsfiddle.net/musicformellons/6nb0wy68/
#Pqb-icon {
background: white;
width: 170px;
height: 100px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 2px solid salmon;
border-bottom: 20;
-webkit-transition: .9s ease-in-out;
-moz-transition: .9s ease-in-out;
-o-transition: .9s ease-in-out;
transition: .9s ease-in-out;
}
#Pqb-icon span {
display: block;
position: absolute;
border: 5px solid black;
width: 20px;
height: 20px;
bottom: 50px;
left: 12%;
background: rgba(255, 200, 220, 0.4);
transition-timing-function: ease;
}
#Pqb-icon span:nth-child(1) {
left: 12%;
border-radius: 25px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(1) {
left: 12%;
border-radius: 25px;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#Pqb-icon.open span:nth-child(3) {
left: 36%;
bottom: 50px;
border-radius: 25px;
-webkit-transform: translate(-40px,0px);
-moz-transform: translate(-40px,0px);
-o-transform: translate(-40px,0px);
transform: translate(-40px,0px);
-webkit-transition: .25s ease .7s;
-moz-transition: .25s ease .7s;
-o-transition: .25s ease .7s;
transition: .4s ease .9s;
opacity: 0;
}
#Pqb-icon span:nth-child(2) {
width: 5px;
height: 38%;
bottom: 27%;
background: black;
border: 0px solid black;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(2) {
width: 5px;
height: 38%;
bottom: 27%;
background: black;
border: 0px solid black;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease;
}
#Pqb-icon.open span:nth-child(4) {
width: 5px;
height: 38%;
bottom: 27%;
left: 15%;
background: black;
border: 0px solid black;
-webkit-transform: rotateZ(-180deg);
-moz-transform: rotateZ(-180deg);
-o-transform: rotateZ(-180deg);
transform: rotate(-180deg) ;
-webkit-transition: .25s ease-in-out .7s;
-moz-transition: .25s ease-in-out .7s;
-o-transition: .25s ease-in-out .65s;
transition: .4s ease .8s;
opacity: 0;
}
#Pqb-icon span:nth-child(3) {
bottom: 27%;
left: 28.5%;
border-radius: 25px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(5) {
bottom: 27%;
left: 46%;
border-radius: 25px;
-webkit-transform: rotateZ(-180deg);
-moz-transform: rotateZ(-180deg);
-o-transform: rotateZ(-180deg);
transform: rotateZ(-180deg) ;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
-o-transition: .35s ease-in-out;
transition: .4s ease .4s;
opacity: 0;
}
#Pqb-icon span:nth-child(4) {
width: 5px;
height: 32%;
bottom: 10%;
left: 43%;
background: black;
border: 0px solid black;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(6) {
width: 5px;
height: 32%;
bottom: 10%;
left: 46.5%;
background: black;
border: 0px solid black;
-webkit-transform: rotateZ(-180deg);
-moz-transform: rotateZ(-180dreg);
-o-transform: rotateZ(-180deg);
transform: rotateZ(-180deg) ;
-webkit-transition: .35s ease-in-out .35s;
-moz-transition: .35s ease-in-out .35s;
-o-transition: .35s ease-in-out .35s;
transition: .4s ease .4s;
opacity: 0;
}
#Pqb-icon span:nth-child(5) {
bottom: 27%;
left: 51%;
border-radius: 25px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#Pqb-icon span:nth-child(6) {
width: 5px;
height: 35%;
bottom: 40%;
left: 51%;
background: black;
border: 0px solid black;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
Since you are only using transition and already have the toggleClass method, you don't need to change anything in the JS to reverse the transition effect. All that you need to do is add a different transition setting to the default state (not with class='open') like the below snippet.
Essentially what we are doing is this:
The elements that are causing the effect are the third, fourth, fifth and sixth span elements.
Initially for the move out effect, the fifth and sixth span elements move out with a delay of .4s.
The third and fourth span elements move out with a delay of 0.8s (or 0.9s). This has an extra delay because it has to move out after the fifth and sixth are out of the way. The fifth and sixth spans will take 0.4s (transition duration) + 0.4s (transition delay) = 0.8s to complete.
On toggling the class off, we need this to happen in reverse. That is, the third and fourth span elements should move in to view at a delay of 0.4s while the fifth and sixth span should move in after a delay of 0.8s. So adding the appropriate transition settings to the following selectors would be enough:
#Pqb-icon span:nth-child(3) {transition: .4s ease .4s;}
#Pqb-icon span:nth-child(4) {transition: .4s ease .4s;}
#Pqb-icon span:nth-child(5) {transition: .4s ease .9s;}
#Pqb-icon span:nth-child(6) {transition: .4s ease .9s;}
Note: I have removed the vendor prefixes in the snippet and added the prefix library to keep the code small.
$('#Pqb-icon').on('click', function() {
$(this).toggleClass('open');
});
#Pqb-icon {
background: white;
width: 170px;
height: 100px;
border-radius: 5px; /*dikte van rondjes*/
position: relative;
overflow: hidden;
border: 2px solid salmon;
border-bottom: 20;
transition: .9s ease-in-out;
}
#Pqb-icon span {
display: block;
position: absolute;
border: 5px solid black;
width: 20px;
height: 20px;
bottom: 50px;
left: 12%;
background: rgba(255, 200, 220, 0.4);
transition-timing-function: ease;
}
/* BEFORE collapsed: hamburger */
#Pqb-icon span:nth-child(1) {
left: 12%;
border-radius: 25px;
transition: .25s ease-in-out;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(1) {
left: 12%;
border-radius: 25px;
}
#Pqb-icon span:nth-child(2) {
width: 5px;
height: 38%;
bottom: 27%;
background: black;
border: 0px solid black;
transition: .25s ease;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(2) {
width: 5px;
height: 38%;
bottom: 27%;
background: black;
border: 0px solid black;
}
#Pqb-icon span:nth-child(3) {
bottom: 27%;
left: 28.5%;
border-radius: 25px;
transition: .4s ease .4s;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(3) {
left: 36%;
bottom: 50px;
border-radius: 25px;
transition: .4s ease .9s;
transform: translate(-40px, 0px);
opacity: 0;
}
#Pqb-icon span:nth-child(4) {
width: 5px;
height: 32%;
bottom: 10%;
left: 43%;
background: black;
border: 0px solid black;
transition: .4s ease .4s;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(4) {
width: 5px;
height: 38%;
bottom: 27%;
left: 15%;
background: black;
border: 0px solid black;
transition: .4s ease .9s;
transform: rotate(-180deg);
opacity: 0;
}
#Pqb-icon span:nth-child(5) {
bottom: 27%;
left: 51%;
border-radius: 25px;
transition: .4s ease .9s;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(5) {
bottom: 27%;
left: 46%;
border-radius: 25px;
transition: .4s ease .4s;
transform: rotateZ(-180deg);
opacity: 0;
}
#Pqb-icon span:nth-child(6) {
width: 5px;
height: 35%;
bottom: 40%;
left: 51%;
background: black;
border: 0px solid black;
transition: .4s ease .9s;
transform-origin: left center;
}
#Pqb-icon.open span:nth-child(6) {
width: 5px;
height: 32%;
bottom: 10%;
left: 46.5%;
background: black;
border: 0px solid black;
transition: .4s ease .4s;
transform: rotateZ(-180deg);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button type="button">
<span class="sr-only">Toggle navigation</span>
<div id="Pqb-icon">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</button>
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 alot of CSS and its throwing me off. I need an image to become less opaque when I hover on it and a child element, but the child element slides in when the image is hovered on. I got half of it to work, but the image returns to full opacity when the child element is hovered on. I can't get the selector right. Here is whats working now http://www.fuzionvideos.com/#video_recent
Here is the code:
<ul><li id="vid_link" class="box 1"><img src="http://www.fuzionvideos.com/images/uploads/SF_BoT.jpg" alt="Belt - Truth"> <span class="caption description">Armor of the Lord: Belt of Truth</span><b class="title_line">Belt - Truth</b></li></ul>
and the CSS:
#vid_display .box {
cursor: pointer;
height: 199px;
overflow: hidden;
width: 300px;
float: left;
position: relative;
}
#vid_display .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
position: absolute;
left: 0;
}
#vid_display .box .caption {
position: absolute;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#vid_display .box .description {
height: 90px;
width: 300px;
display: block;
bottom: -140px;
line-height: 25pt;
text-align: left;
padding-left: 8px;
line-height:normal;
}
#vid_display .box:hover .description {
-moz-transform: translateY(-150%);
-o-transform: translateY(-150%);
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
}
#vid_display ul {
padding-left: 0px;
}
#vid_display li{
display: inline;
margin-right: 18px;
}
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#vid_display a :hover {
color: #ed1c24;
}
.title_line {
background-color:#ebebeb;
position: absolute;
height: 25px;
width: 300px;
top: 169px;
left: 0;
z-index: 101;
padding-top: 8px;
}
and on jsfiddle : http://jsfiddle.net/blalan05/FkV2z/
You're applying opacity to the hovered image. So, when you hover on anchor, the image is no longer hovered. Try applying the :hover for the .box, so when you will hover on the anchor (which is a child of .box) the .box will be still considered as hovered.
Change this:
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
to this:
#vid_display .box:hover img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}