I found and I integrated this code in my Wordpress.
I would ask you, do you know how to make links in the CSS and where?
I made the links with <a href=""> in the HTML but then I have links only on the text and not on the whole button.
#import url("https://fonts.googleapis.com/css?family=Lato");
*,
*:before,
*:after { /* Slow, yes I know :) */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Lato, Sans-serif;
font-size: 12px;
background: #353138;
background: -moz-radial-gradient(center, ellipse cover, #353138 0%, #1a181c 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #353138), color-stop(100%, #1a181c));
background: -webkit-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%);
background: -o-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%);
background: -ms-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%);
background: radial-gradient(ellipse at center, #353138 0%,#1a181c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#353138', endColorstr='#1a181c', GradientType=1);
}
.container {
margin: 0;
width: 100%;
height: 100%;
padding: 20px;
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-ms-perspective: 1500px;
perspective: 1500px;
position: relative;
}
.toggle {
color: #fff;
display: inline-block;
line-height: 16px;
font-size: 20px;
float: left;
}
.menu {
margin: 100px auto;
position: relative;
background: #62278d;
background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
background: -webkit-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -o-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -ms-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: linear-gradient(to bottom, #62278d 0%,#2cc09b 100%);
width: 300px;
border-width: 20px 0;
border-style: solid;
border-color: #fff;
color: #fff;
height: 540px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-box-shadow: 0 0 50px 0 #444;
-moz-box-shadow: 0 0 50px 0 #444;
box-shadow: 0 0 50px 0 #444;
}
input.toggle:checked ~ .menu {
-webkit-transform: translateY(-200px) translateZ(-150px) rotateX(45deg) rotateZ(45deg);
-moz-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
-ms-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
-o-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
}
.menu:before {
content: '';
position: absolute;
height: 30px;
width: 300px;
top: 520px;
left: 0px;
-webkit-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
-moz-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
-ms-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
-o-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
transform: rotateX(90deg) translateY(-15px) translateZ(15px);
background: #fff;
pointer-events: none;
}
.menu:after {
content: '';
position: absolute;
height: 540px;
width: 30px;
top: -20px;
right: -30px;
-webkit-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
-moz-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
-ms-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
-o-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
transform: rotateY(90deg) translateZ(-15px) translateX(15px);
border-width: 20px 0;
border-style: solid;
border-color: #fff;
background: #62278d;
background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
background: -webkit-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -o-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -ms-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: linear-gradient(to bottom, #62278d 0%,#2cc09b 100%);
pointer-events: none;
}
.menu .top {
padding: 15px 15px 15px 20px;
width: 100%;
}
.menu .top .search {
position: relative;
display: inline-block;
}
.menu .top .search input {
background-color: transparent;
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
color: transparent;
border: 1px solid #fff;
border-radius: 20px;
padding: 10px 30px 10px 15px;
outline: 0 none;
width: 60px;
height: 40px;
position: relative;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 2;
}
.menu .top .search input:focus {
width: 200px;
color: #fff;
}
.menu .top .search:after {
content: '\f002';
font-family: 'FontAwesome';
font-size: 16px;
position: absolute;
color: #fff;
top: 11px;
right: 18px;
width: 20px;
height: 20px;
pointer-events: none;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 1;
}
.menu .top .exit {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
outline: 0 none;
float: right;
cursor: pointer;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 2;
}
.menu .top .exit:focus,
.menu .top .exit:active {
border: 1px solid #fff;
border-radius: 20px;
}
.menu .top .exit:before {
content: '';
pointer-events: none;
position: absolute;
display: block;
width: 30px;
height: 30px;
top: 14px;
left: -6px;
border-width: 0 2px 0 0;
border-style: solid;
border-color: #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 1;
}
.menu .top .exit:after {
content: '';
pointer-events: none;
position: absolute;
display: block;
width: 30px;
height: 30px;
top: -6px;
left: -6px;
border-width: 0 2px 0 0;
border-style: solid;
border-color: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu .middle {
position: relative;
min-height: 40px;
list-style: none;
padding: 0;
margin: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menu .middle li {
margin: 0;
padding: 15px 0 15px 40px;
outline: 0 none;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 1;
}
.menu .middle li:hover {
-webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.menu .middle li:hover:before,
.menu .middle li:focus:before {
content: '\f0da';
font-family: 'FontAwesome';
font-size: 16px;
position: absolute;
top: 15px;
left: 20px;
}
.menu .middle li:focus,
.menu .middle li:focus:after {
color: #3EAC9E;
background-color: #62278d;
}
.menu .middle li .fa {
padding-right: 15px;
}
.menu .middle li:focus:after,
.menu .middle li:hover:after {
content: '';
position: absolute;
height: 48px;
width: 30px;
top: 0px;
right: -30px;
-webkit-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
-moz-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
-ms-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
-o-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
transform: rotateY(90deg) translateZ(-14px) translateX(15px);
pointer-events: none;
}
.menu .middle li:hover:after {
-webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
}
.menu .bottom {
height: 40px;
}
.menu-back {
position: absolute;
background: transparent;
top: -20px;
left: 0;
width: 300px;
height: 540px;
-webkit-transform: translateZ(-29px);
-moz-transform: translateZ(-29px);
-ms-transform: translateZ(-29px);
-o-transform: translateZ(-29px);
transform: translateZ(-29px);
-webkit-box-shadow: 100px 100px 50px -30px #111;
-moz-box-shadow: 100px 100px 50px -30px #111;
box-shadow: 100px 100px 50px -30px #111;
z-index: 0;
}
.glass-reflection {
position: absolute;
-webkit-transition: box-shadow 1s;
-moz-transition: box-shadow 1s;
-ms-transition: box-shadow 1s;
-o-transition: box-shadow 1s;
transition: box-shadow 1s;
-webkit-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-moz-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-ms-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-o-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-webkit-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
-moz-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
border-radius: 200px 0 20px 0 ;
top: 85px;
left: 95px;
width: 200px;
height: 100px;
background-color: transparent;
}
input.toggle:checked ~ .menu .glass-reflection {
-webkit-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
}
<!--
Inspired by this dribble by The Purple Bunny:
https://dribbble.com/shots/1677163-Menu
-->
<div class="container">
<input type="checkbox" class="toggle" id="toggle" checked="checked" /><label class="toggle" for="toggle"> Toggle tilt</label>
<div class="menu">
<div class="top">
<span class="search">
<input type="text">
</span>
<a class="exit" href="#" tabindex="0"></a>
</div>
<ul class="middle">
<li tabindex="0"><i class="fa fa-calendar"></i>Calendar</li>
<li tabindex="0"><i class="fa fa-camera"></i>Photos</li>
<li tabindex="0"><i class="fa fa-check-square-o"></i>Tasks</li>
<li tabindex="0"><i class="fa fa-map-marker"></i>Places</li>
<li tabindex="0"><i class="fa fa-codepen"></i>Codepen</li>
<li tabindex="0"><i class="fa fa-dribbble"></i>Dribbble</li>
<li tabindex="0"><i class="fa fa-user"></i>User account</li>
<li tabindex="0"><i class="fa fa-cogs"></i>Settings</li>
</ul>
<div class="bottom"></div>
<div class="menu-back"></div>
<div class="glass-reflection"></div>
</div>
</div>
Have you tried styling your link to look like a button? Like this?
a{border:solid 1px black; padding:20px;background-color:yellow; text-decoration:none;font-size:1.5em; border-radius:50%;}
I made padding big so you can put mouse all around the text inside of the button and see that it still works.
https://codepen.io/susanwinters/pen/wvWjBYW
Wrap whole button with tag, not only text.
Related
How can I make the last part of the spinner lighter (ie. fading):
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 5px solid transparent;
border-top-color: #aaa;
border-right-color: #aaa;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="loader-wrapper">
<div id="loader"></div>
</div>
I tried using gradient but it converts it to a square
You can apply the gradient to a pseudo-element like so:
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 5px solid transparent;
border-top-color: #aaa;
border-right-color: #aaa;
animation: spin 2s linear infinite;
}
#loader::after {
content: '';
width: 85%;
height: 85%;
background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: 0;
left: 0;
transform: translate(-5%, -5%);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="loader-wrapper">
<div id="loader"></div>
</div>
Here is another idea with less code and without using pseudo element.
.loader {
--border-width: 5px;
height: 150px;
width: 150px;
border-radius: 50%;
/* 0.5px's are needed to avoid hard-stopping */
--mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--border-width) - 0.5px),
#000 calc(100% - var(--border-width) + 0.5px)
);
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(#aaa 30%, transparent 80%) 0 0/50% 100% no-repeat; /* this is our border image */
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader"></div>
And this is the comparison of my answer with #Ricky's answer by setting background to body:
#Ricky's way:
body {
background: pink; /* just added this */
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 5px solid transparent;
border-top-color: #aaa;
border-right-color: #aaa;
animation: spin 2s linear infinite;
}
#loader::after {
content: '';
width: 85%;
height: 85%;
background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: 0;
left: 0;
transform: translate(-5%, -5%);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="loader-wrapper">
<div id="loader"></div>
</div>
My way:
body {
background: pink; /* just added this */
}
.loader {
--border-width: 5px;
height: 150px;
width: 150px;
border-radius: 50%;
/* 0.5px's are needed to avoid hard-stopping */
--mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--border-width) - 0.5px),
#000 calc(100% - var(--border-width) + 0.5px)
);
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(#aaa 30%, transparent 80%) 0 0/50% 100% no-repeat; /* this is our border image */
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader"></div>
Usually by click the button we can create a pop up. But here I've some trouble to display a pop up when user click the picture.
I using css for this code
I've a button which is the button is a picture. From the button(picture) I don't know how to get the value then pass to the javascript to do the pop up.
Here my code:
<div class="nav-divider"> </div>
<img src="images/shared/nav/form.giff" width="93" height="14" alt="" />
<div class="nav-divider"> </div>
this is css popup
DEMO JSFIDDLE
Source
html
<input type="checkbox" id="linkie" class="popUpControl">
<label for="linkie" class="link">
<span><img src="http://www.clker.com/cliparts/9/1/5/2/119498475589498995button-red_benji_park_01.svg.med.png" height="50"></img></span>
<span class="box">
<span class="title">Title</span>
<span class="copy">Pellentesque habitant morbi tristique senectus et netus</span>
</span>
</label>
css
label {
position: relative;
}
.box {
position: absolute;
left: 0;
top: 100%;
z-index: 100;
/* Prevent some white flashing in Safari 5.1 */
-webkit-backface-visibility: hidden;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: 260px;
padding: 20px;
margin: 24px 0;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}
.box:after {
content: "";
position: absolute;
bottom: 100%;
left: 30px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}
.popUpControl:checked ~ label > .box {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
.popUpControl {
display: none;
}
/* For link example */
.link { color: blue; text-decoration: underline; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
.copy { color: black; text-decoration: none; }
I have a tooltip box and it is working fine. Now I want to add some fade in fade out once the tool-tip box pops in and out.
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Demo : http://jsfiddle.net/squidraj/FHUbA/
How about this?
http://jsfiddle.net/FHUbA/14/
.tooltip:after{
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:after {
opacity:1;
}
What about this one:
http://jsfiddle.net/Roobyx/FHUbA/45/
(you can fix the styles afterwards)
HTML:
<a class="has-tooltip" href="#">
<span class="tooltip">This is some information for our tooltip.</span>
<img id="graph_one" class="graph one" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" />
</a>
CSS:
a[title].tooltip {
width:45px;
height:90px;
}
.tooltip {
display: inline-block;
position: relative;
}
.has-tooltip {
color: #555;
font-size: 16px;
display: block;
margin: 150px 75px 10px 75px;
padding: 5px 5px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.has-tooltip .tooltip {
background: #000;
bottom: 100%;
color: #fff;
display: block;
left: -10px;
margin-bottom: 15px;
border-radius: 5px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-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;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #000 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
I have an icon: when I click on it, an other div, which was hidden, appears just upside. But only when we hover the icon. It works perfectly on FF and Chrome, but on IE10, when you hover the div hidden, it makes it appear...
Here is the html:
<div class="enveloppe_abo" id="enveloppeabo_92">
<li class="abo">
<img src="/images/avatars/femme.gif" class="avatar_40">
</li>
<div class="bulle_abo">
<div class="avatar_abo_bulle">
<img src="/images/avatars/femme.gif" width="68" height="68">
</div>
<div class="supprabo" id="supprabo_92" alt="Remove subscription" title="Remove subscription"></div>
<div class="texte_abo_bulle">steph.toto.com
<br>
<br>Blog de blog blalala et oui de deux trois et quatre informations
<br>Encore une info et oui bien s&ucir...</div>
</div>
</div>
And the css:
.avatar_abo_bulle{
float: left;
position: relative;
height: 68px;
width: 68px;
display: block;
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0px 0px 8px 1px #000;
-webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0, 1);
-moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0, 1);
}
.texte_abo_bulle{
margin-left: 90px;
-webkit-font-smoothing: antialiased;
font-size: 14px;
}
.enveloppe_abo {
position: relative;
float: left;
display: block;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
z-index:11;
}
.enveloppe_bulaut {
position: relative;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
.bulle_abo, .combulle {
border: 1px solid #909090;
bottom: 100%;
color: #fff;
display: block;
left: -114px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
min-width: 250px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-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;
-webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#c9c9c9), color-stop(53%,#606060)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#c9c9c9 2%,#606060 53%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
}
.bulle_abo{
min-height: 90px;
}
.combulle{
margin-left: -36px;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.bulle_abo:before, .combulle:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.bulle_abo:after, .combulle:after {
background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat;
bottom: -20px;
content: " ";
height: 20px;
left: 144px;
margin-left: -13px;
position: absolute;
width: 20px;
}
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle{
min-height: 90px;
opacity: 0.95;
display:block;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle{
display: none;
}
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
display: block;
}
a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited {
color: rgb(0, 78, 194);
text-shadow: 0 1px 3px rgb(255, 255, 255);
font-size: 18px;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
a.lien_bulle:hover {
color: rgb(228, 235, 255);
text-shadow: 0 1px 0 #000;
}
The demo: http://jsfiddle.net/YRwCt/
Any solution for this please? :-(
Change
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle{
To
.abo:hover + .bulle_abo, .enveloppe_bulaut:hover .combulle {
Updated jsFiddle
You were selecting the entire container, not just the image
Re-Edit
You must also add display:none to .bulle_abo to retain the same functionality. Updated jsFiddle
.bulle_abo, .combulle {
// A bunch of lines
display: none;
// A bunch more lines
}
Another Edit
To add the animation back I created a CSS3 animation along with browser prefixes. Updated jsFiddle
To call it
animation: appear .25s linear forwards;
The keyframes for it
#keyframes appear {
0% {opacity:0; transform: translateY(10px);}
100% {opacity:1; transform: translateY(0px);}
}
The Fiddle works. Maybe you have to add the doctype at the beginning of your code:
<!DOCTYPE html>
I've ap problem with the translation of a tooltip. It must appear then translate up. But in my code it only appears... Can't find what is wrong in my code... Ay idea please?
demo: http://jsfiddle.net/RWYeF/
code:
.bulle_abo, .combulle {
border: 1px solid #909090;
bottom: 100%;
color: #fff;
display: block;
left: -114px;
margin-bottom: 15px;
opacity: 0;
display:none;
padding: 20px;
pointer-events: none;
position: absolute;
min-width: 250px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-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;
-webkit-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(2%, #c9c9c9), color-stop(53%, #606060));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
/* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%, #c9c9c9 2%, #606060 53%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#606060', GradientType=0);
/* IE6-9 */
}
.combulle {
margin-left: -36px;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.bulle_abo:before, .combulle:before {
bottom: -20px;
content:" ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.bulle_abo:after, .combulle:after {
background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat;
bottom: -20px;
content:" ";
height: 20px;
left: 144px;
margin-left: -13px;
position: absolute;
width: 20px;
}
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle {
opacity: 0.95;
display:block;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
display: none;
}
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
display: block;
}
a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited {
color: rgb(0, 78, 194);
text-shadow: 0 1px 3px rgb(255, 255, 255);
font-size: 18px;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
a.lien_bulle:hover {
color: rgb(228, 235, 255);
text-shadow: 0 1px 0 #000;
}
.all_abo {
position: relative;
display: block;
float: left;
padding-left: 2px;
}
.avatar_abo_bulle {
float: left;
position: relative;
height: 68px;
width: 68px;
display: block;
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0px 0px 8px 1px #000;
-webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1);
}
.texte_abo_bulle {
margin-left: 90px;
-webkit-font-smoothing: antialiased;
font-size: 14px;
}
.enveloppe_abo {
position: relative;
float: left;
display: block;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
z-index:11;
}
.enveloppe_bulaut {
position: relative;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
In this selector .bulle_abo, .combulle you have two display properties:
.bulle_abo, .combulle {
...
display: block;
...
display: none;
…
}
Remove: display: none (you can't transition from none to block)
Working Fiddle