Create CSS3 Circles with text inside

Create CSS3 Circles with text inside - javascript

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

Related

How to condition styling child by hover on parent only?

In the code below when I hover on the gray button [the parent]
it perform some style on the child div bar
and that is what I need, I don't want child to be hovered itself
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?
Would this fix your issue?
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .baz:not(:hover) .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript, so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
This works because the events mouseover and mouseout events are explicitly added to foo, rather than to its grandchild bar (and bar never visibly overlaps foo).
Working Example:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.foo.hovered .bar {
transform: scaleX(1);
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

Trigger css hover with jQuery

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>

Adding a slide down search box to navigation menu

I am trying to build a slide down search box. I want the search box to slide down once your press the search icon. (I want it exactly like this - http://www.marieclaire.co.uk/). When it slides down I want it to be full width. I have started to build the actual search box, but I can't figure out how to get it to slide down from a search icon. Does anyone have any solutions?
jsfiddle - https://jsfiddle.net/zx06d7vz/ (search box at bottom of screen)
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-site {
float: right;
font-size: 1.2em;
height: 50px;
line-height: 50px;
padding: 0 15px
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
height: 0;
left: 50%;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(100% + 1px);
transform: translateX(-50%);
width: 100vw;
z-index: 999999
}
.search-form.search-visible {
opacity: 1;
height: 200px
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd
}
.search-form .input-group {
padding: 0 10px;
position: relative;
top: 72px;
width: 100%
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #b4c5cd solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none;
width: calc(100% - 36px) !important
}
.search-form .form-control:focus {
background: #fff !important
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
}
<form role="search" method="get" class="search-form form-inline search-visible" action="">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>

Test that one.
HTML:
<h1 class="search">S</h1>
<form role="search" method="get" class="search-form form-inline" action="">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
CSS
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-site {
float: right;
font-size: 1.2em;
height: 50px;
line-height: 50px;
padding: 0 15px
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
left: 50%;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: -100px;
transform: translateX(-50%);
width: 100vw;
z-index: 999999
}
.search-form.search-visible {
opacity: 1;
height: 200px;
top: 0;
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd
}
.search-form .input-group {
padding: 0 10px;
position: relative;
top: 72px;
width: 100%
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #b4c5cd solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none;
width: calc(100% - 36px) !important
}
.search-form .form-control:focus {
background: #fff !important
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
}
jQuery:
$('.search').on('click', function () {
$('.search-form').addClass('search-visible');
});

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..

jQuery add/remove class or toggle class

Im just curious to know the best practice for either toggling a class or just adding and removing it during a mouseenter/mouseleave state using jquery. Both seem to work fine im just not to sure which is best to go with.
Thank you
$('#image1').mouseenter(function() {
$('#image1').toggleClass('transform');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
$('#image1').mouseleave(function() {
$('#image1').toggleClass('transform show-images-text');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

Well a lot of this style question get shot down here on SO, because it seems it comes down to preference. But HERE is a way to do it all without javascript, only CSS, which some might consider more efficient.
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
#image1:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#image1:hover .images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.images-color-overlay:hover {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

Your code is technically fine, however you can shorten it to just use the hover() method, as the function you provide will be called for both mouseenter and mouseleave events.
You can also use the this reference in the function to save DOM accesses, and also cache the jQuery object created from $(this) in a variable for re-use. Try this:
$('#image1').hover(function() {
var $image = $(this).toggleClass('transform');
$image.find('.images-color-overlay').toggleClass('transparent');
$image.find('.images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>

The toggleClass is the bast practice in your case.
Internally it's also doing same thing if the class exist then remove it and if not then add it. See it yourself , goto this github link and search for toggleClass.
// Check each className given, space separated list
if (self.hasClass(className)) {
self.removeClass(className);
} else {
self.addClass(className);
}

Develop Reference

JavaScript is the programming language of the Web.

Create CSS3 Circles with text inside - javascript

Related

How to condition styling child by hover on parent only?

Trigger css hover with jQuery

Adding a slide down search box to navigation menu

Overlay hover effect

jQuery add/remove class or toggle class

Categories

Resources