You can see what i have tried to do. But I want the bottom of each image rollover to appear after the right pops up and fades in. Not just when the mouse is hovered over the bottom of each image.
I'm also having trouble making the whole thing clickable to a blog post without overshadowing/stopping the individual links, and short code selection from being workable.
I've been at this for days with no luck... (The social icons, will be individual links but I've not done that yet)
Anyone see where I'm going wrong? I've got a fiddle at bottom. Ideally I'd like for it to all play on hover but obviously delay the black box at the bottom. I'm so close its annoyingly annoying.
HTML:
<body>
<div class="wrapper">
<div class="container left">
<img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suit6.jpg" alt="image" />
<div class="sig"></div>
<div class="innercontent css3-2">
<span class="css3-2 resize"><br/><h2>Title of the blog Post</h2>
<p>April 29, 2014</p>
<p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p>3/4 length • Agnelli check • bespoke jacket • Jacket • London Lounge</p><span class="clickhere">Click here to read this article</span></span>
</div>
</div><!-- .container -->
<div class="container right">
<img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suittemp.jpg" alt="image" />
<div class="sig"></div>
<div class="innercontent css3-2">
<span class="css3-2 resize"><br/><h2>Title of the blog Post</h2>
<p>April 29, 2014</p>
<p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p>3/4 length • Agnelli check • bespoke jacket • Jacket • London Lounge</p><span class="clickhere">Click here to read this article</<span></span>
</div>
</div><!-- .container -->
</footer>
</div><!-- .wrapper -->
</body>
CSS:
*{margin:0;padding:0;}
img {margin:0;padding:0px;}
.wrapper{
margin:0 auto;
width:720px;
padding:30px;
position:relative;
}
.left {float:left;}
.right {float:right;}
p {
color:#000;
font-size:14px;
margin-bottom: 12px;
}
a{
text-decoration:none;
color: #000
}
h2, h2 a { font-size: 20px;
color: #000;
line-height: 30px;
}
h2 a:hover, a:hover {
color:#F3625F;
}
.container{
position:relative;
overflow:hidden;
width: 300px;
max-height: 100%;
}
.sig {
display: block;
width: 98%;
height: 98%;
background: url(http://www.glennleader.co.uk/wp-content/uploads/2014/05/signature.png) bottom right no-repeat ;
top: 0;
left: 0;
position:absolute;
overflow: hidden;
}
.resize {
width: 95%;
height: 100%;
position: absolute;
display: block;
overflow: hidden;
padding: 0 2.5%;
top: 0;
left: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
transition: all .2s ease-out;
opacity: 0;
}
.resize:hover {
opacity: 1;
}
.clickhere {
position: absolute;
display: block;
overflow: hidden;
width: 300px;
height: 20px;
padding: 15px 0;
text-align: center;
bottom: 0;
left: 0;
background: #000;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;
animation-delay:2s;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
}
.clickhere:hover a {
display: block;
color: #fff;
font-weight: 800;
}
.clickhere:hover {
opacity: 0.5;
cursor: pointer;
}
.clickhere a:hover {
color:#F3625F
}
.url textarea {
width: 100%;
border: 0 none transparent;
margin: 0;
padding: 0;
outline: 0;
resize: none;
overflow: hidden;
font-family: inherit;
background: 0;
text-align: center;
font-size: 12px;
height: 16px;
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
-webkit-writing-mode: horizontal-tb;
background: transparent;
}
.innercontent {
display: block;
height: 100%;
text-align: center;
width:100%;
background:rgba(255,255,255,0.7);
position:absolute;
}
.css3-2:hover .resize {
}
.css3-2 {
bottom:-370px;left:0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.innercontent a.css3-2{
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container:hover .css3-2 {
bottom:4px;
cursor: pointer;
}
Fiddle:
http://jsfiddle.net/Veriix/euXGZ/
The first issue is solved easy... you need to add the ::hover-pseudo class to the parent element to change the styles properly.
.css3-2:hover .clickhere a, .clickhere:hover a {
display: block;
color: #fff;
font-weight: 800;
}
.css3-2:hover .clickhere, .clickhere:hover {
opacity: 0.5;
cursor: pointer;
}
.css3-2 .clickhere a:hover, .clickhere a:hover {
color:#F3625F
}
Updated Fiddle:
http://jsfiddle.net/euXGZ/5/
(I did not make any animation changes, just an update on the issue of displaying the link onhover)
EDIT: If you don't want the clickable element to slide in, give it an absolute positioning and maybe add some different animation (including a delay if you want it to wait til the slide in is done!)
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
https://www.facebook.com/j.beargraphics
Related
I don't know how to solve this problem: on hover of 'a' elements the div enlarges and the other 'a' move.
Thanks for help
https://jsfiddle.net/0r2v2qyp/
Here html:
<a id="btn_agency" class="btn_presentation">Agenzia</a>
<a id="btn_student" class="btn_presentation">Studente</a>
<a id="btn_prof" class="btn_presentation">Docente</a>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
And css:
.btn_presentation {
float: left;
margin: 10px;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: all .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 0;
background: red;
transition: all .2s ease-out;
}
.btn_presentation:hover {
letter-spacing: 5px;
transition: all .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
height: 2px;
transition: all .2s ease-in-out;
}
To be able to animate the letter-spacing, you have to give the div a fixed width wide enough to make up for the text when expanded.
div {
display: inline-block;
margin: 10px;
width: 120px;
}
.btn_presentation {
display: inline-block;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: all .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 0;
background: red;
transition: all .2s ease-out;
}
.btn_presentation:hover {
letter-spacing: 5px;
transition: all .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
height: 2px;
transition: all .2s ease-in-out;
}
<div>
<a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
<a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
<a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>
An option could instead be to scale it using transform
div {
display: inline-block;
margin: 10px;
}
.btn_presentation {
display: inline-block;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: transform .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 2px;
background: red;
transition: width .2s ease-out;
}
.btn_presentation:hover {
transform: scale(1.2);
transition: transform .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
transition: width .2s ease-in-out;
}
<div>
<a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
<a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
<a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>
Updated based on comment
This stretch the word only side ways
div {
display: inline-block;
margin: 10px;
}
.btn_presentation {
display: inline-block;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: transform .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 2px;
background: red;
transition: width .2s ease-out;
}
.btn_presentation:hover {
transform: scaleX(1.2);
transition: transform .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
transition: width .2s ease-in-out;
}
<div>
<a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
<a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
<a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>
I've built a block section on my website, what I'd like to do is when the user hovers over the block, the block-caption fades in over the top.
Currently there's no effect, it just jumps.
See this fiddle for current code
How do I do this?
Code:
.blocks {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
.blocks [class*=col] {
padding: 1px;
}
.blocks .block {
background: #979797;
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 350px;
}
.blocks .block h3 {
color: #ffffff;
font-size: 2.5em;
text-align: center;
margin-top: 8px;
}
.blocks .block .block-title {
position: absolute;
text-align: center;
top: 40%;
width: 100%;
display: block;
}
.blocks .block img {
opacity: .4;
display: block;
height: 350px;
margin: 0 auto;
width: 100%;
}
.blocks .block .block-caption {
background: #394074;
top: 0;
width: 100%;
height: 100%;
color: #ffffff;
display: block;
left: 0;
opacity: 0;
padding: 20px 0;
position: absolute;
text-align: center;
}
.blocks .block .block-caption a {
display: inline-block;
border: 2px solid #ffffff;
padding: 20px 30px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
font-size: 1.2em;
margin-top: 1em;
}
.blocks .block .block-caption a:hover {
text-decoration: none;
}
.blocks .block .block-caption p {
margin-top: 1em;
margin-bottom: 1em;
display: block;
font-size: 1.4em;
color: #ffffff;
}
.blocks .block:hover .block-caption {
opacity: 1;
}
.blocks .block:hover img {
opacity: 0.2;
}
<div class="blocks">
<div class="block">
<div class="block-title">
<h3>Online GP <br> Service</h3>
</div>
<!-- /.block-title -->
<img alt="Training" src="https://placeholdit.imgix.net/~text?txtsize=75&txt=640%C3%97480&w=640&h=480">
<div class="block-caption">
<h3>Online GP <br> Service</h3>
<p>Sed ut perspiciatis unde omnis iste natus
<br>voluptatem accusantium doloremque</p>
Find Out More
</div>
<!-- /.block-caption -->
</div>
</div>
Here's a working fiddle with what (I think it is) you want:
https://jsfiddle.net/utrgtech/2/
You can add:
-webkit-transition: opacity ease-out 1s;
-moz-transition: opacity ease-out 1s;
-o-transition: opacity ease-out 1s;
transition: opacity ease-out 1s;
For example. It enables compatibility throughout all browsers.
Here's documentation: https://css-tricks.com/almanac/properties/t/transition/
Just give
.block-caption {
transition:2s all;
-webkit-transition:2s all;
-ms-transition:2s all;
}
Working Fiddle
Please use transition: all linear .3s; on .blocks .block .block-caption I have use fade effect for this caption. Check this fiddle https://jsfiddle.net/utrgtech/3/
you to ad to your .block this
.blocks .block .block-caption{
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; // mozilla brower
-o-transition: all 1s ease-in-out; // opera brower
}
put animation: fadeIn .6s ease-in 1 forwards; in .blocks .block:hover .block-caption
.blocks .block:hover .block-caption {
opacity: 0;
animation: fadeIn .6s ease-in 1 forwards;
}
#keyframes fadeIn {
to {opacity: 1}
}
I have created div called "footer" it appears always at the bottom when the page loads and goes up when scrolling down. Right now I am trying to position 2x text fields using col-6-lg(bootstrap), they should be under the "footer" and visible after scrolling.
body{
background-image: url("../img/bg.png");
background-size: cover;
background-color: #01383b;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
#content {
background: #D0E5FF;
padding: 20px;
color: #00214B;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
#footer {
opacity: 0.8;
filter: alpha(opacity=40);
background: rgb(14, 122, 128);
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}
#button1{
margin-top: 15px;
}
#button2{
margin-top: 15px;
margin-left: 95px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3cd8e1 url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #3cd8e1;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
.content{
font-family: 'Open Sans';
color: #fff;
}
<div id="footer">
<div class="container">
<div class="col-lg-8 col-lg-offset-2 text-center">
<input type="image" src="img/true.png" alt="Submit" width="78" height="78" id="button1">
<input type="image" src="img/false.png" alt="Submit" width="78" height="78" id="button2">
</div>
<div class="col-lg-4 pull-right">
Top
</div>
</div>
</div>
<div class="container">
<div class="col-lg-6 pull-left text-center">
<h1>Да, това е!</h1>
</div>
<div class="col-lg-6 pull-left text-center">
<h1>Не, това е Lorem Ipsum</h1>
</div>
</div>
So here is the possible solution.
You can wrap both boxes (footer and under-footer container) into, let's call it: footer-wrap.
Then, set .footer-wrap {position: absolute;bottom: 0;width: 100%;}
And remove positioning classes for #footer from your styles.
/* #footer {
position: absolute;
bottom: 0;
width: 100%;
}*/
Set:
.footer-wrap {
position: absolute;
bottom: 0;
width: 100%;
}
Here is a demo: https://jsfiddle.net/xvwqt9a0/
Also here is a demo with your style and your html: https://jsfiddle.net/xvwqt9a0/1/
I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!
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;
}