Develop Reference

Expand/collapse div on hover - not collapsing when not active

I have some divs set up so they expand when you hover on them, but at the moment they aren't closing when you don't hover on them, it just stays on the last one you hovered on. How can I get it so they are all closed if you aren't hovering on one?
JS
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
tiles.removeClass('active');
$(this).addClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
CSS
.buttons .button h4 {
z-index:3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position:relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
padding: 15px;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
font-size: 81px;
}
.buttons .active p {
opacity: 1;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.buttons .active h4 {
margin-top: 15px;
display:none;
}
HTML
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test.jpg" alt="" />
<h4 style="color:black;">Documents</h4>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

hover can take a second function as a parameter which adds a handler for when the mouse leaves the element. You could remove the class again in there:
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})

$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
Its example from https://api.jquery.com/hover/
You can also use mouseover() and mouseout() if you want to do that differently.

change specific element while having the same class to multiple elements

I have an image gallery. I want to change 'margin-top' to 50px for every '.item' element that has less than 140px of height(for responsive design purpose). this is what i have so far.
what should I write in between the curly brackets in order for this to work?
please reffer to the javascript code.
var itemHeight = $(".flex-images").find(".item").height();
if(itemHeight<140){
$(this(".item")).style.marginTop = "50px";
}:
.item {
cursor: pointer;
max-height: 150px;
min-height:120px;
position: relative;
overflow: hidden;
top:0;
left:0;
}
.item img {
position: absolute;
right:0;
padding:0px;
-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;
}
.item {
position: absolute;
-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;
opacity: 0;
}
.item:hover { opacity: 1; }
.item .overtext {
-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;
transform: translateY(40px);
-webkit-transform: translateY(40px);
text-align:center;
}
.item {
opacity: 1;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.item:hover,
.item:focus {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.item .tagline {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity:0;
margin-top:100px;
}
.item:hover .tagline,
.item:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="flex-images">
<div class="item " data-w="160" data-h="100"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
<div class="tagline overtext"> <img src="http://diginfobettersystem.com/i/images/facebook-logo.png"style="height:30px;width:30px;">etet
</div>
</div>
</div>

CSS3 transition & transform is not working well on class removal

I've made some nice hamburger effect which is pretty common these days over the websites in mobile navigation bar.
So when someone click the hamburger it turn the X perfectly (when adding a "open" class) but when the class removed the animation is changing weirdly, please watch the effect at the following code:
HTML:
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
CSS:
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-moz-transform: rotate3d(0, 0, 1, 0deg);
-o-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#hamburger span:nth-child(3) {
top: 14px;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
}
#hamburger.open span:nth-child(2) {
opacity: 0;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
}
Javascript:
$(document).ready(function () {
$('#hamburger').click(function () {
$(this).toggleClass('open');
});
});
https://jsfiddle.net/phhkL4bu/4/
Can you please help me out?

You can correct the removal animation by doing the following:
Set the forward transition's setting within the .open selector. When the .open class is added, the opacity of second child is transitioned for a duration of 0.3s without any delay. At the same time, the top position of the other 2 children is also being transitioned. Then after a 0.3s delay, the transform of the 1st and 3rd children is transitioned. This gives the effect of the top and the bottom bar moving down and then rotating.
Set its exact reverse as transition setting in the default selector. That is,make the transform on the 1st and 3rd child transition immediately with a 0.3s duration while the top of these two children and the opacity of the 2nd child are transitioned after a delay of 0.3s. This setting will apply when the element loses the .open class and so,will produce the reverse effect.
$(document).ready(function() {
$('#hamburger').click(function() {
$(this).toggleClass('open');
});
});
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
transition: opacity 0.3s ease-in-out 0.3s;
}
#hamburger span:nth-child(3) {
top: 14px;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(2) {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

Change class of other div when hovering on one div

I have four divs. When I hover one div, its height and width increase with animation. I want something like when I hover on one div its size increases and other 3 div sizes are decreasing.
I am done till increase size of div on hover I don't understand how to change size of all other divs at one time.
Here is my HTML and CSS.
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
<div align="center">
<div style="width:1000px;">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>
anyone please helpme

No need of Javascript/jQuery, you can do this using CSS only. You can take advantage of :hover class of CSS.
You can use the container's :hover to animate(decrease) the dimension of the elements. Ex: .container>div:hover ~ div { to set the styles of all the other <div> elements than the hovered element
You can animate(increase) the dimensions of the element that is hovered
.container {
width: 1000px;
}
.container:hover div:not(:hover) {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(.5);
}
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.container .style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
<div align="center">
<div class="container">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>
Update
Because, there are some issues when hovering between the two elements all the elements are contracted, it's better to use Javascript. No need of Javascript/jQuery, I'm taking back my words.
You can use siblings() to select all the sibling elements of the current elements.
$('.container .style_prevu_kit').hover(function() {
$(this).siblings('.style_prevu_kit').addClass('animate');
}, function() {
$(this).siblings('.style_prevu_kit').removeClass('animate');
});
.container {
width: 1000px;
}
div.animate {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(.5);
}
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.container .style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div align="center">
<div class="container">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>

Since you have tagged with jQuery, you can do something like add a class to all the sibling elements when a item is hovered, then you can add css rules to that class to have a smaller view
jQuery(function($) {
$('.style_prevu_kit').hover(function(e) {
$(this).siblings().toggleClass('small', e.type == 'mouseenter')
})
})
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
.style_prevu_kit.small {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div align="center">
<div style="width:1000px;">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>

You could use css selector ~ but this only works for the next siblings and not the previous ones. Selecting previous siblings is not possible. http://jsfiddle.net/q041cwd8/
.style_prevu_kit:hover ~.style_prevu_kit {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.5);
transition: all 200ms ease-in;
transform: scale(0.5);
}

I think this can be done a lot simpeler. If you hover one of the squares, you're also hovering the container. You can use that. In the example below I use color and fontsize to keep the example a bit less complicated:
/* Default state */
#container .style_prevu_kit{
opacity: 0.75;
background: orange;
display: inline-block;
width: 40%;
height: 50px;
vertical-align: top;
transition: opacity 0.5s, background 0.5s, font-size 0.5s;
}
/* The other not selected elements */
#container:hover .style_prevu_kit{
opacity: 0.5;
background: blue;
}
/* The currect selected element */
#container .style_prevu_kit:hover{
opacity: 1.0;
background: green;
font-size: 2em;
}
<div align="center">
<div id="container" style="width:100%;">
<div id="s1" class="style_prevu_kit">s1</div>
<div id="s2" class="style_prevu_kit">s2</div>
<div id="s2" class="style_prevu_kit">s3</div>
<div id="s3" class="style_prevu_kit">s4</div>
</div>
</div>

SVG css background image fade in different color svg on hover

I want to only use one div for the icon and one css selector.
Currently I have it working with two different background images being loaded.
fiddle: http://jsfiddle.net/6r0x4npd/
html
<h1>Hover over the icon</h1>
<div class="icon bell"></div>
css
body {
padding: 50px;
}
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjOTk5OTk5IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjNzk3OGU3IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}