how to simulate mouse hover on image in css

how to simulate mouse hover on image in css - javascript

i have a glow effect written on the hover of an image. this works really good.
my question is
how to just make itself glitter every 10 seconds without mouse
being hovered.
the css classes are like this:
.demo
{
margin: 30px auto;
background-color: #FFFFFF;
border-radius: 5px;
padding: 5px;
position: relative;
overflow: hidden;
-webkit-transition: all 1000ms cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
-webkit-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
-moz-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
-ms-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
-o-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
transition: all 2000ms cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
-webkit-transition-timing-function: cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
-moz-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
-ms-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
-o-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
}
.show-off
{
width: 500px;
height: 500px;
position: absolute;
top: -180px;
left: -600px;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
background: -o-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
}
.demo:hover .show-off
{
top: 0px;
left: 0px;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.demo:hover
{
box-shadow: 0px 0px 20px 5px #FFFFFF;
-webkit-box-shadow: 0px 0px 20px 5px #FFFFFF;
-moz-box-shadow: 0px 0px 20px 5px #FFFFFF;
-o-box-shadow: 0px 0px 20px 5px #FFFFFF;
}
and the html code is
<div id="logo" class="demo">
<img src="http://blog.spoongraphics.co.uk/wp-content/uploads/2011/colourful-logo/18.jpg" />
<div class="show-off" />
</div>
i feel i don't have to simulate the mouse hover for achieving the task. any suggestions?
JSFiddle
thanks,
laks.
ps: jquery can be used in case.

You could make a custom keyframe animation and just set the duration to 10 seconds when you apply it to your image. Add infinite if you want it to repeatedly loop through!
#keyframe glow {
0%{}
100%{}
}
img {
animation: glow 10s infinite;
}
http://jsfiddle.net/co9c8qoy/

Unfortunately, you can not do it with CSS. Furthermore you can't do it with JS, because it's not a trusted event.
Most untrusted events should not trigger default actions, with the
exception of the click event.

Related

Trigger event upon li click

I'm trying to trigger a function upon users clicking on the li elements in the example below but not having much luck outside of using onclick - i.e. clicking on the first li (value of 1) would ideally call a function where the value "1" is passed in.
Styled list control
..
<ul id='uItem'>
<li><a href="#" class="launch" >1</a></li>
<li>2</li>
...
https://jsfiddle.net/wL8vpuqt/5/

Working fiddle.
You've just to prevent default behavior by using event.preventDefault() :
$(document).ready(function() {
$('ul#uItem li').click(function(event) {
event.preventDefault();
alert($(this).text());
});
});
Hope this helps.
$(document).ready(function() {
$('ul#uItem li').click(function(e) {
e.preventDefault();
alert($(this).text());
});
});
/* line 81, ../sass/menu.scss */
.path-nav {
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
position: fixed;
}
/* line 87, ../sass/menu.scss */
.path-nav.path-nav-bottom-left {
bottom: 30%;
left: 20%;
position: absolute;
}
/* line 93, ../sass/menu.scss */
.path-nav.path-nav-top-right {
top: 26px;
right: 26px;
}
/* line 100, ../sass/menu.scss */
.path-nav a {
position: relative;
z-index: 1;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
border: 6px solid white;
background: #44403d;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
text-decoration: none;
-moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
}
/* line 127, ../sass/menu.scss */
.path-nav.active a {
-moz-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
}
/* line 137, ../sass/menu.scss */
.path-nav ul {
position: absolute;
z-index: 0;
top: 8.5px;
left: 8.5px;
margin: 0;
padding: 0;
}
/* line 147, ../sass/menu.scss */
.path-nav li {
position: absolute;
z-index: 0;
display: block;
top: 0;
left: 0;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(1) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.175s;
-webkit-transition-delay: 0.175s;
-o-transition-delay: 0.175s;
transition-delay: 0.175s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(2) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.14s;
-webkit-transition-delay: 0.14s;
-o-transition-delay: 0.14s;
transition-delay: 0.14s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(3) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.105s;
-webkit-transition-delay: 0.105s;
-o-transition-delay: 0.105s;
transition-delay: 0.105s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(4) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.07s;
-webkit-transition-delay: 0.07s;
-o-transition-delay: 0.07s;
transition-delay: 0.07s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(5) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.035s;
-webkit-transition-delay: 0.035s;
-o-transition-delay: 0.035s;
transition-delay: 0.035s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(6) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
/* line 169, ../sass/menu.scss */
.path-nav:target li {
-moz-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
-o-transform: rotate(1800deg);
-ms-transform: rotate(1800deg);
transform: rotate(1800deg);
}
/* line 174, ../sass/menu.scss */
.path-nav:target .cross {
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(1) {
top: -100px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(2) {
top: -100px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(3) {
top: -100px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(4) {
top: -30px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(5) {
top: -30px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(6) {
top: -30px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(7) {
top: 40px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(8) {
top: 40px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(9) {
top: 40px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(10) {
top: 110px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(1) {
top: 265px;
left: 0px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(2) {
top: 252px;
left: -82px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(3) {
top: 214px;
left: -156px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(4) {
top: 156px;
left: -214px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(5) {
top: 82px;
left: -252px;
}
/* line 200, ../sass/menu.scss */
.path-nav .path-nav-expander,
.path-nav .path-nav-close {
z-index: 3;
width: 68px;
height: 68px;
line-height: 68px;
}
/* line 208, ../sass/menu.scss */
.path-nav .path-nav-close {
z-index: 2;
position: absolute;
top: 0;
left: 0;
background: none;
outline: red;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
-o-box-shadow: 0;
box-shadow: 0;
}
/* line 222, ../sass/menu.scss */
.path-nav:target .path-nav-expander {
z-index: 1;
}
/* line 228, ../sass/menu.scss */
.path-nav .path-nav-expander {
position: relative;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0fd2ab), color-stop(50%, #0fd2ab), color-stop(50%, #0fd2ab));
background: -webkit-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -moz-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -o-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -ms-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
-moz-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
-o-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
}
/* line 241, ../sass/menu.scss */
.path-nav .path-nav-expander .cross {
position: relative;
width: 68px;
height: 68px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
/* line 249, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-h,
.path-nav .path-nav-expander .cross .cross-v {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
/* line 259, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-h {
width: 8px;
margin-left: -4px;
height: 40px;
margin-top: -20px;
}
/* line 267, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-v {
width: 40px;
margin-left: -20px;
height: 8px;
margin-top: -4px;
}
/* line 277, ../sass/menu.scss */
.path-nav-top-right .path-nav-expander {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #143da5), color-stop(50%, #133a9c), color-stop(50%, #103081));
background: -webkit-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -moz-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -o-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -ms-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: linear-gradient(#143da5, #133a9c 50%, #103081 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="path-nav path-nav-bottom-left">
<a href="#menu" class="path-nav-expander">
<div class="cross">
<div class="cross-h"></div>
<div class="cross-v"></div>
</div>
</a>
<ul id='uItem'>
<li><a href="#" class="launch" >1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><a href="#" class="launch" o>10</a></li>
</ul>
</nav>

How to use jquery function in a tag

I am trying to use some functionality like a sidepanel to open but using an <a> tag.
Could you please help me, below is the code related to it.
HTML
Click Me
jQuery
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
I want to make use of the above jQuery and use it in my <a> tag.

Attach the click event to body and delegate to cd-btn. Adding event handler to element directly doesn't handle dynamic elements. The element cd-btn is in your pop-up. The pop-up HTML is dynamically injected, so when you attach the event the HTML is probably not present. But you can easily add the handler to body and delegate it like:
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
jQuery(function($) {
//open the lateral panel
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event) {
if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
$(function() {
$("#popover-a").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-b').html();
}
});
});
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden {
display: none;
}
.cd-main-content {
text-align: center;
}
.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
.cd-panel-header {
position: fixed;
height: 27px;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
.from-right .cd-panel-header,
.from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 0;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #fafafa;
border-left: 1px solid #c8cacc;
z-index: 1;
width: 70%;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
overflow-y: auto;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
CD PANEL
</div>
<!-- cd-paneCD PANELl-container -->
</div>
<!-- cd-panel -->

Want to close the sidepanel using the minus icon

Currently the sidepanel opens using PLUS symbol and is closed using the close btn on the sidepanel.
PLUS symbol now changes to minus but it doesn't go back to plus when the sidepanel is closed and also I want to be able to click the minus symbol and close the sidepanel as well.
Hope I made my point clear.
Here is the jsfiddle related to it:
https://jsfiddle.net/bob_js/h9yfbden/1/
HTML
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel-nvv from-right">
<header class="cd-panel-header">
</header>
<div class="cd-panel-container">
Content
</div>
</div>
CSS
.glyphicon-plus-sign, .glyphicon-minus-sign{
top: 30%;
position: absolute !important;
z-index: 1;
color: rgb(255, 133, 102);
background-color: #fff;
border-radius: 50%;
border: 1px solid #fff;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.glyphicon-plus-sign:hover, .glyphicon-minus-sign:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-main-content {
text-align: center;
}
.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-main-content .cd-btn-val {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-val:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.cd-panel-header {
position: fixed;
height: 27px;
width: 3%;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
-webkit-transition: top 1.3s 0s;
-moz-transition: top 1.3s 0s;
transition: top 1.3s 0s;
}
.from-right .cd-panel-header, .from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 20px;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 1.3s 0.3s;
-moz-transition: top 1.3s 0.3s;
transition: top 1.3s 0.3s;
}
#media only screen and (min-width: 1471px) {
.cd-panel-header {
height: 30px;
}
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 11px;
left: 20px;
height: 3px;
width: 15px;
background-color: #fff;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #901818;
border-left: 1px solid #c8cacc;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 1.8s;
-moz-transition-duration: 1.8s;
transition-duration: 1.8s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
overflow-y: auto;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 23.5%;
}
}
#media only screen and (min-width: 1271px) {
.cd-panel-container {
width: 23.5%;
}
}
#media only screen and (min-width: 1471px) {
.cd-panel-container {
width: 23.5%;
}
}
jQuery
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});

You were not that far...
I only changed addClass for toggleClass
in $('.cd-btn').on('click'....
And added $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");to $('.cd-panel').on('click'....
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
//NVV
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});
Updated Fiddle

Use .toggleClass(); and listening to both $('.cd-btn, .cd-panel').
JSFiddle
jQuery(function($) {
//open the lateral panel
$('.cd-btn, .cd-panel').on('click', function(event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
});

chrome set opacity is not consistentanly rendering as expected

I've spend about a week looking for an answer and trying various different ways of setting the opacity and forcing the various elements to redraw in order to update the full amount.
This renders fully in firefox http://i.imgur.com/l90zjoi.png
var hex = document.getElementsByClassName('hex')[0];
hex.classList.add("highlight");
.hex {
float: left;
margin-right: -29px;
margin-bottom: -52px;
height: 104px;
width: 120px;
}
.highlight {
opacity:0.50;
filter: alpha(opacity=50);
}
.desert {
background: url("http://i.imgur.com/zAr9w6T.png");
}
.periplaneta{
fill : #FF9933;
stroke : black;
}
a {
color: inherit;
}
.menu {
background: #8bc34a;
color: white;
text-align: center;
}
.menu-item, .menu-open-button {
background: #e91e63;
border-radius: 100%;
width: 25px;
height: 25px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 25px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
}
.menu-open {
display: none;
}
.menu-item:hover {
background: white;
color: #e91e63;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.7, 1.7) translate3d(0, 0, 0);
transform: scale(1.7, 1.7) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
-webkit-transform: translate3d(-40px, -25px, 0);
transform: translate3d(-40px, -25px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 280ms;
transition-duration: 280ms;
-webkit-transform: translate3d(40px, -25px, 0);
transform: translate3d(40px, -25px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 380ms;
transition-duration: 380ms;
-webkit-transform: translate3d(40px, 25px, 0);
transform: translate3d(40px, 25px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(-40px, 25px, 0);
transform: translate3d(-40px, 25px, 0);
}
.rotate{
-webkit-transition: all 0.2s linear;
transition: all 0.5s linear;
}
.rotate.down{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
<div class="hex desert"><nav class="menu"><input type="checkbox" href="#" class="menu-open" name="menu-open53" id="menu-open53" disabled=""><label class="menu-open-button" for="menu-open53" style="background: orange;"><i class="fa rotate action-display fa-arrow-right"></i></label> <i class="fa fa-arrow-right move-action"></i> <i class="fa fa-shield defence-action"></i> <i class="fa fa-bug recruit-action"></i> <i class="fa fa-cog harvest-action"></i> </nav><svg height="100" width="100"><g><circle cx="30" cy="60" r="15" id="inf" class="periplaneta"></circle><text x="25" y="65" font-family="Verdana" font-size="20" fill="black">1</text></g><g><polygon points="60,5 40,40 80,40" class="periplaneta"></polygon><text x="55" y="35" font-family="Verdana" font-size="20" fill="black">2</text></g><g><rect x="50" y="50" width="40" height="40" class="periplaneta"></rect><text x="60" y="75" font-family="Verdana" font-size="20" fill="black">1</text> </g></svg></div>
What is causing this? There are 432 hexes on the page. But i'm only looking to highlight a maximum of 6 of them. Any thoughts/insights would be really appreciated.

So after spending a week investigating this it looks to be a bug with Chrome.
In place of changing the opacity I opt'd for applying a webfilter to highlight the hexes as a workaround for the bug in chrome.
-webkit-filter: brightness(110%);
-webkit-filter: sepia(70%);
-webkit-filter: hue-rotate(-15deg);
I hope this helps anyone experiencing the same issue

Open envelope animation html5 or jquery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I was looking for the forum or some other place to ask, so forgive me for posting this here...
I have been looking for an animation such as opening an envelope, not just shrink the image pretending that it opens.. and need something like this:
http://www.youtube.com/watch?v=PYX31NUbu2M
but I don't want a flash animation...
Click to open:
Envelope opens, pulls the "invitation", unfolds the "invitation" and stays on screen
Click to continue
Click to go back
Click to closed the envelope
All I was able to find was flash animation, I need it to be html, css, java or jquery... also I need some sort of flexibility for the width and height since I want to be able to use responsive media...
If anyone knows of script that can do this please, share it, please point me in the right direction.
Thank you.

Check this out : http://codepen.io/search?q=Envelope&limit=all&depth=everything&show_forks=false
I found some codepen could match for your requirement :
http://codepen.io/peiche/pen/ifhwq
http://codepen.io/jotavejv/pen/LkJyA

A Google search revealed this:
Demo and source: http://cssdeck.com/labs/animated-envelope
HTML:
<div id="bg"></div>
<div class="contact">
<div class="envelope">
<div class="top">
<div class="outer"><div class="inner"></div></div>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="paper">
<a class="call" href="tel:5555555555"><div class="i"></div>555 555 5555</a>
<a class="mail" href="mailto:you#domain.com"><div class="i">#</div>you#doma.in</a>
</div>
</div>
</div>
CSS:
#bg {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #bbbbbb 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(40%,#ffffff), color-stop(100%,#bbbbbb)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: radial-gradient(ellipse at center, #ffffff 40%,#bbbbbb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=1 );
}
.contact {
position: absolute;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
height: 250px;
width: 250px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
-ms-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
.contact .envelope {
position: absolute;
height: 93px;
width: 165px;
left: 50%;
margin-left: -83px;
top: 50%;
margin-top: -50px;
background: #F9F9F9;
transition: margin-top 300ms;
-ms-transition: margin-top 300ms;
-moz-transition: margin-top 300ms;
-o-transition: margin-top 300ms;
-webkit-transition: margin-top 300ms;
}
.contact:hover .envelope {
transition-delay: 150ms;
-ms-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-o-transition-delay: 150ms;
margin-top: -20px;
}
.contact .envelope .top {
position: absolute;
top: -3px;
left: 0px;
width: 100%;
height: 73px;
z-index: 30;
overflow: hidden;
transform-origin: top;
-ms-transform-origin: top;
-moz-transform-origin: top;
-o-transform-origin: top;
-webkit-transform-origin: top;
transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
}
.contact:hover .envelope .top {
transition: transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-ms-transition: -ms-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-moz-transition: -moz-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-o-transition: -o-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-webkit-transition: -webkit-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
height: 10px;
top: -60px;
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.contact .envelope .outer {
position: absolute;
bottom: 0px;
left: 0px;
border-left: 83px solid transparent;
border-right: 82px solid transparent;
border-top: 70px solid #EEE;
}
.contact .envelope .outer .inner {
position: absolute;
left: -81px;
top: -73px;
border-left: 81px solid transparent;
border-right: 80px solid transparent;
border-top: 68px solid #333;
}
.contact .envelope .bottom {
position: absolute;
z-index: 20;
bottom: 0px;
left: 2px;
border-left: 81px solid transparent;
border-right: 80px solid transparent;
border-bottom: 45px solid #333;
}
.contact .envelope .left {
position: absolute;
z-index: 20; top: 0px;
left: 0px;
border-left: 81px solid #333;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
.contact .envelope .right {
position: absolute;
z-index: 20;
top: 0px;
right: 0px;
border-right: 80px solid #333;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
.contact .envelope .cover {
position: absolute;
z-index: 15;
bottom: 0px;
left: 0px;
height: 55%;
width: 100%;
background: #EEE;
}
.contact .envelope .paper {
position: absolute;
height: 83px;
padding-top: 10px;
width: 100%;
top: 0px;
left: 0px;
background: #F9F9F9;
z-index: 10;
transition: margin-top 300ms 0ms;
-ms-transition: margin-top 300ms 0ms;
-moz-transition: margin-top 300ms 0ms;
-o-transition: margin-top 300ms 0ms;
-webkit-transition: margin-top 300ms 0ms;
}
.contact:hover .envelope .paper {
margin-top: -60px;
transition: margin-top 300ms 150ms;
-ms-transition: margin-top 300ms 150ms;
-moz-transition: margin-top 300ms 150ms;
-o-transition: margin-top 300ms 150ms;
-webkit-transition: margin-top 300ms 150ms;
}
.contact .envelope .paper a {
position: relative;
display: block;
font-size: 14px;
margin: 5px;
margin-bottom: 0px;
text-align: center;
color: #333;
text-decoration: none;
}
.contact .envelope .paper a.call .i {
position: absolute;
top: 2px;
left: 20px;
display: inline-block;
width: 3px;
height: 5px;
border-width: 5px 0 5px 2px;
border-style: solid;
border-color: #555;
background: transparent;
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
border-top-left-radius: 3px 5px;
border-bottom-left-radius: 3px 5px;
-moz-border-radius-topleft: 3px 5px;
-moz-border-radius-bottomleft: 3px 5px;
-webkit-border-top-left-radius: 3px 5px;
-webkit-border-bottom-left-radius: 3px 5px;
transition: border-color 300ms;
-ms-transition: border-color 300ms;
-moz-transition: border-color 300ms;
-o-transition: border-color 300ms;
-webkit-transition: border-color 300ms;
}
.contact .envelope .paper a {
color: #333;
transition: color 200ms;
-ms-transition: color 200ms;
-moz-transition: color 200ms;
-o-transition: color 200ms;
-webkit-transition: color 200ms;
}
.contact .envelope .paper a:hover {
color: #EEE;
}
.contact .envelope .paper a.call:hover .i {
border-color: #DDD;
}
.contact .envelope .paper a.mail .i {
position: absolute;
top: 0px;
left: 17px;
display: inline-block;
font-size: 13px;
font-weight: bold;
}

We Keep Coding

JavaScript is the programming language of the Web.

how to simulate mouse hover on image in css - javascript

You could make a custom keyframe animation and just set the duration to 10 seconds when you apply it to your image. Add infinite if you want it to repeatedly loop through! #keyframe glow { 0%{} 100%{} } img { animation: glow 10s infinite; } http://jsfiddle.net/co9c8qoy/

Unfortunately, you can not do it with CSS. Furthermore you can't do it with JS, because it's not a trusted event. Most untrusted events should not trigger default actions, with the exception of the click event.

Related

Trigger event upon li click

How to use jquery function in a tag

Want to close the sidepanel using the minus icon

chrome set opacity is not consistentanly rendering as expected

Open envelope animation html5 or jquery [closed]

Categories

Resources