Trigger css hover with jQuery

Trigger css hover with jQuery - javascript

Is it possible to link a CSS hover action to another link with jQuery (or pure CSS for that matter)?
I have a combined hover and tooltip animation meant as an overlay over a map. What I want to achieve is having the hover firing when hovering over the city names from the list.
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div>New York</div>
<div>Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
I've also included this as a fiddle: https://jsfiddle.net/7Lsvdqpx/3/
I have tried several suggested methods without any luck, such as this: Trigger hover with jQuery?

You can do this with pure CSS and no jQuery by using the adjacent selector (~). I've implemented it in the snippet below and had to add a few HTML classes. Here's an example of how that works:
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after
The above snippet says... if you hover the .list-ny menu item, then select an adjacent .location element that has a .dot-ny:before in it and apply the relevant styles.
Here's the full example with the hover implemented for all relevant properties:
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before,
.list-ny:hover ~ .location .dot-ny .kart_dot:before,
.list-wa:hover ~ .location .dot-wa .kart_dot:before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div class="list-ny">New York</div>
<div class="list-wa">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>

Jon's answer is good but if you have many cities you can try mine with jquery.
$('.city a').mouseover(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').addClass('hovered');
}).mouseleave(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').removeClass('hovered');
});
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.hovered .kart_dot::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.hovered:before,
.hovered:after,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.hovered:before,
.hovered:after{
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-ny city">New York</div>
<div class="list-wa city">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>

Related

How to change animation position in Off-Canvas Menu Effects

I'm working with OffCanvasMenuEffects and i'm using wave menu effect. You can see this menu in following:
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>
Currently the Menu opens from bottom to top.
My question is how is it possible to change the position of how the off canvas menu loads, default is bottom to top with wave effect convert to top to bottom, like this website: https://afriendofmine.nl
How can this be achieved?
I was tried to edit the menu but the result not good! I edit .menu-wrap class. I replace bottom: 0; with top: 0; as following:
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
After all, how can I make the menu to opens from top to bottom? like this website: https://afriendofmine.nl
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>

This is what you need?
.morph-shape>svg {
transform:rotate3d(1, 0, 0, 180deg);
}
https://jsfiddle.net/g4pmr6ez/1/

Overlay hover effect

I can't solve this problem, i want to make overlay hover effect, when the mouse on top of image, will have a layer and text come out. But now it can't, there have 7 images, when the mouse touch them, all image will have overlay effect at the same time, and are not disappear. Thank you so much.
html
<article class="col-md-4 isotopeItem sm">
<div class="portfolio-item">
<div class="content-item">
<a href="https://www.w3schools.com">
<img src="img/Case Study/Hotel-Kitchen-Equipment.jpg" alt="Kitchen" style="width:360px;height:292px;">
<div class="overlay"></div>
<div class="corner-overlay-content">Kitchen</div>
<div class="overlay-content">
<p>Kitchen</p>
</div>
</a>
</div>
</div>
</article>
css
.portfolio-items article img {width:100%;}
.portfolio-item {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.portfolio-item img {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
background: #fff;
opacity:0.9;
}
.portfolio-item .portfolio-desc {
display: block;
opacity: 0;
position: absolute;
width: 100%;
left: 0;
top: 0;
color: rgba(220, 220, 220, 0.7);
}
.portfolio-item:hover .portfolio-desc {
padding-top: 20%;
height: 100%;
transition: all 200ms ease-in-out 0s;
opacity: 1;
}
.portfolio-item .portfolio-desc a {
color: #ED502E;
}
.portfolio-item .portfolio-desc a:hover {
/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
top:-20px;
padding: 30px;
height: 0;
opacity: 0;
position: relative;
}
.portfolio-item:hover .folio-info{
height: 100%;
opacity: 0.8;
transition: all 500ms ease-in-out 0s;
top:-10px;
}
.portfolio-item .portfolio-desc .folio-info h5 {
text-transform: uppercase;
}
.portfolio-item .portfolio-desc .folio-info p {
font-size: 12px;
}
.content-item{
overflow: hidden;
backface-visibility: hidden;
}
.overlay{
border-bottom: 76px solid #000000;
border-left: 360px solid #000000;
bottom: 0;
height: 0;
opacity: .65;
position: absolute;
right: 0;
text-indent: -9999px;
transition: all .9s ease-out;
width: 0;
}
:hover .overlay{
border-bottom: 292px solid #000000;
border-left: 360px solid #000000;
transition: all .9s ease-out;
}
.corner-overlay-content{
bottom: 26px;
color: #ffffff;
position: absolute;
right: 114px;
transition: all .5s ease-out;
font-size: 40px;
}
:hover .corner-overlay-content{
opacity: 0;
transition: all .10s ease-out;
}
.overlay-content{
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
transition: all .10s ease-out;
}
.overlay-content p{
color: #ffffff;
position: absolute;
right: 114px;
font-size: 40px;
bottom: 124px;
}
:hover .overlay-content{
opacity: 1;
transition: all .5s ease-out;
}
<article class="col-md-4 isotopeItem sm">
<div class="portfolio-item">
<div class="content-item">
<a href="#">
<img src="img/Case Study/Hotel-Kitchen-Equipment.jpg" alt="Kitchen" style="width:360px;height:292px;">
<div class="overlay"></div>
<div class="corner-overlay-content">Kitchen</div>
<div class="overlay-content">
<p>Kitchen</p>
</div>
</a>
</div>
</div>
</article>

Try this code
CSS
.portfolio-items article img {
width: 100%;
}
.portfolio-item {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.portfolio-item img {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
background: #fff;
opacity: 0.9;
}
.portfolio-item .portfolio-desc {
display: block;
opacity: 0;
position: absolute;
width: 100%;
left: 0;
top: 0;
color: rgba(220, 220, 220, 0.7);
}
.portfolio-item:hover .portfolio-desc {
padding-top: 20%;
height: 100%;
transition: all 200ms ease-in-out 0s;
opacity: 1;
}
.portfolio-item .portfolio-desc a {
color: #ED502E;
}
.portfolio-item .portfolio-desc a:hover {
/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
top: -20px;
padding: 30px;
height: 0;
opacity: 0;
position: relative;
}
.portfolio-item:hover .folio-info {
height: 100%;
opacity: 0.8;
transition: all 500ms ease-in-out 0s;
top: -10px;
}
.portfolio-item .portfolio-desc .folio-info h5 {
text-transform: uppercase;
}
.portfolio-item .portfolio-desc .folio-info p {
font-size: 12px;
}
.content-item {
overflow: hidden;
backface-visibility: hidden;
}
.overlay {
border-bottom: 76px solid #000000;
border-left: 360px solid #000000;
bottom: 0;
height: 0;
opacity: .65;
position: absolute;
right: 0;
text-indent: -9999px;
transition: all .9s ease-out;
width: 0;
}
.content-item:hover .overlay {
border-bottom: 292px solid #000000;
border-left: 360px solid #000000;
transition: all .9s ease-out;
}
.corner-overlay-content {
bottom: 26px;
color: #ffffff;
position: absolute;
right: 114px;
transition: all .5s ease-out;
font-size: 40px;
}
.content-item:hover .corner-overlay-content {
opacity: 0;
transition: all .10s ease-out;
}
.overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
transition: all .10s ease-out;
}
.overlay-content p {
color: #ffffff;
position: absolute;
right: 114px;
font-size: 40px;
bottom: 124px;
}
.content-item:hover .overlay-content {
opacity: 1;
transition: all .5s ease-out;
}
you should not use :hover directly. make use of container and on mouse over it trigger the effect.
link for reference
hope this helps..

Make hamburger menu fadeout work

I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});

You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.

hover colour transition slide effect

I have a link that changes colour when mouse hovers over it and i am fully conformable with the coding for this however i would like the however effect to slide down as oppose to just change colour. how is this possible with css. I have looked around stack overflow but only able to find instances where people use background images and alter the its position. Is that the only way to make this possible?
It is difficult to articualte what i am trying to achieve but it is on show on this website weblounge.be the effect that i am trying to achieve is on the two links on the homepage
#contactlink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
margin-left: 78px;
margin-top: 40px;
float: left;
color: #FFF;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
text-decoration: none;
opacity: 0;
}
#contactlink:hover {
background-color: #FFF;
color: #666;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
}
Let's talk
https://jsfiddle.net/6t3quy4w/5/

The website you linked does theirs by having the :before pseudo-element transition its scale over top of the button. It also required having a span inside the button so that its z-index could be set on top of the :before element. Here is an example:
a.color-change {
display: inline-block;
padding: 15px;
color: black;
background-color: white;
position: relative;
padding: 15px;
border: 1px solid black;
text-decoration: none;
z-index: 0;
}
a.color-change:before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #777;
transform: scale(1, 0);
transition: all .25s ease-out;
transform-origin: center top;
z-index: 0;
}
a.color-change:hover:before {
transform: scale(1);
}
a.color-change span {
z-index: 1;
position: relative;
}
<span>Hover Over Me</span>

Not sure why your using whit on white, anyway based on my understanding i have provide some thing for you
#contactlink {
background: #1568b6;
color: #fff;
display: inline-block;
line-height: normal;
padding: 17px 20px 16px 20px;
position: relative;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background .15s;
-moz-transition: background .15s;
-ms-transition: background .15s;
-o-transition: background .15s;
transition: background .15s
}
#contactlink span {
position: relative;
z-index: 1;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s
}
#contactlink:before {
background: #6c6c6c;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 0;
display: block;
padding: 0;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out
}
#contactlink:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<a href="#contact" class="smoothScroll" id="contactlink">
<span>Let's talk</span>
</a>

Create CSS3 Circles with text inside

I am trying to add text inside a CSS3 circle. But the text is outside of the circles proportion. When I hover over the circle it changes color but I would also like for the text to dissapear as well.
Extras: Is there a way to create make the circle pulsate while mouse is over it? Will jquery or javascript be necessary?
Example : http://jsfiddle.net/jqEzZ/2/
<style>
.cn-nav > a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;
}
.cn-nav a span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cn-nav a.cn-nav-prev span{
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.cn-nav a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;
}
.cn-nav a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}
</style>
HTML
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>

In your span style set:
.cn-nav a span {
overflow: hidden;
….
}
and remove text-indent: -9000px;
To make the text disappear, set the color equal to the background color on hover:
.cn-nav a:hover span {
...
background-color:#a8872d;
color: #a8872d;
}
Demo
If you want the circle to pulsate, look at using an animation (MDN Docs) for your hover rather than a simple transition.

I can't see what kind of picture you are using as a background image but I have an idea on how to place the text inside of the circle and hide it on hover.
I think I would solve this using a pseudoelement since you can than place text inside of your link and center it as well.
On hover you could then just put opacity: 0 or empty the content (content: "";)
I did simplify the markup just to show you how I'd solve it with the pseudoelement.
http://dabblet.com/gist/6406590

It's possible to make it pulsate purely with CSS using CSS3 animations. Learn more here.
JSfiddle: http://jsfiddle.net/Q3gMS/1/
HTML:
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<p>Click ME!</p>
<span></span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>
CSS:
.cn-nav > a {
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev {
left: 0px;
}
a.cn-nav-next {
right: 0px;
}
.cn-nav a span {
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
border-radius: 23px;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
-webkit-background-size: 17px 25px;
-moz-background-size: 17px 25px;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cn-nav a p {
display: block;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
margin: 0;
padding: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.cn-nav a:hover p {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.cn-nav a:hover span {
-webkit-animation: pulsate 1s infinite;
-moz-animation: pulsate 1s infinite;
-ms-animation: pulsate 1s infinite;
-o-animation: pulsate 1s infinite;
animation: pulsate 1s infinite;
}
#keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-moz-keyframes pulsate {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-webkit-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-ms-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-o-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
.cn-nav a.cn-nav-prev span {
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div {
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.cn-nav a:hover span {
width: 100px;
height: 100px;
border-radius: 50px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
margin: -50px 0 0 -50px;
-webkit-background-size: 22px 32px;
-moz-background-size: 22px 32px;
background-size: 22px 32px;
background-color: #a8872d;
}
.cn-nav a:hover div {
width: 90px;
height: 90px;
-webkit-background-size: 120% 120%;
-moz-background-size: 120% 120%;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
border-radius: 45px;
}

HTML
<a class="circle"></a>
CSS
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
background: #bada55;
display: block;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.circle:after {
content: "Hover Here";
position: absolute;
width: 100%;
text-align: center;
top: 40%;
}
.circle:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
background: #82983b;
}
.circle:hover:after {
content: "";
}
DEMO
For now, this just scales on hover and changes color. What did you mean by pulsate -- kinda like this? Pulsate w/ Keyframes

Develop Reference

JavaScript is the programming language of the Web.

Trigger css hover with jQuery - javascript

Related

How to change animation position in Off-Canvas Menu Effects

Overlay hover effect

Make hamburger menu fadeout work

hover colour transition slide effect

Create CSS3 Circles with text inside

Categories

Resources