My tooltip is stuck in one place no matter which link I hover over and I dont know whats wrong. Is there a way I can adjust this code so that the tooltip appears over the link I hover over?
.tooltip {
display: inline;
position: relative;
z-index: 999;
}
.tooltip-content {
position: absolute;
background: url(../img/shape1.svg) no-repeat center bottom;
background-size: 100% 100%;
z-index: 9999;
padding-top: 0.95em;
height: 2em;
width: 5.5em;
bottom: 100%;
margin-left: -100px;
text-align: center;
color: #fff;
opacity: 0;
cursor: default;
font-size: 2.5em;
pointer-events: none;
font-family: 'Oduda-Bold-Demo';
-webkit-transform: scale3d(0.1,0.2,1);
transform: scale3d(0.1,0.2,1);
-webkit-transform-origin: 50% 120%;
transform-origin: 50% 120%;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
-webkit-transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1);
transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1);
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
/* Arrow */
.tooltip-content::after {
content: '';
position: absolute;
width: 64px;
height: 64px;
left: 50%;
margin-left: -8px;
top: 100%;
background: #00AEEF;
-webkit-transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg);
transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg);
}
Thanks for the help
Related
Is it possible to reverse this animation direction on mouseleave ?
i tried to add a mouseleave even to .link but it stops the hovering
.link {
position: relative;
overflow: hidden;
display: inline-block;
font-size: 100px;
}
.box {
width: 100%;
height: 100%;
content: '';
background: black;
position: absolute;
left: 0;
transform: translateX(-100%);
transition: transform 0.5s ease-in;
}
.link:hover .box {
transform: translateX(0)
}
<a class="link">
item
<span class="box"></span>
</a>
Using scale combined with transform-origin it's possible:
.link {
position: relative;
overflow: hidden;
display: inline-block;
font-size: 100px;
}
.link::after {
content: '';
height: 100%;
background: black;
position: absolute;
left: 0;
right: 0;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease-in, transform-origin 0s 0.4s;
}
.link:hover::after {
transform: scaleX(1);
transform-origin: right;
}
<a class="link">
item
</a>
Related question to get different ideas using background: How to animate underline from left to right?
.link {
position: relative;
overflow: hidden;
display: inline-block;
font-size: 100px;
}
.box {
width: 100%;
height: 100%;
content: '';
background: black;
position: absolute;
left: 0;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.link:hover .box {
transform: translateX(0)
}
<a class="link">
item
<span class="box"></span>
</a>
I have a problem with some code I grabbed from Codepen, trying to modify to my needs. I want to be able to see "Our Desks" in the top left side of the screen with the background, idk why but when the background changed the span fades. thanks!
here is the Fiddle: https://jsfiddle.net/zm8ps24a/1/
HTML
<body>
<span class="svc-title"> Our Desks
</span>
<section id="section-1">
<div class="hover-link flexboxcenter">
<div class="nav-1">
Oldschool Desk
<div class="bg-1"></div>
<br>
Modern Desk
<div class="bg-2"></div>
<br>
Modern Desk Version 2
<div class="bg-2"></div>
</div>
</div>
</section>
</body>
CSS
#import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
/* General */
#nr-1:hover + .bg-1,#nr-2:hover + .bg-2{
opacity:8.0;
}
.flexboxcenter {
display: flex;
justify-content: center;
align-items: center;
}
.section-1 {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.hover-link {
height: 100px;
width: 100%;
z-index: 100000;
}
.hover-link .nav-1 {
z-index: 10000;
}
.hover-link .nav-1 a {
top:50px;
text-align: center;
display: block;
font-family: 'Droid Serif', serif;
text-decoration: none;
color: black;
font-size: 50px;
letter-spacing: 1px;
padding: 10px;
transition: all 500ms ease-in-out;
}
/* Background classes */
.bg-1 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property:opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.bg-2 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property:opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
/* Hover effect classes */
.new {
color: white !important;
opacity: 1 !important;
}
.bla {
opacity: 0.3;
}
/* Hover Effect Underline From Center by Ian Lunn */
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #63A9A9;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
.svc-title{
position:relative;
font-size:20px;
font-family:'Heebo';
float:left;
left:20px;
top:10px;
opacity:1;
color: #a2a3a7;
}
JS
//Updated
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
just for saying the base code is by Håkan-Filip Swahn.
I was struggling for a bit, I fixed it by adding
#section-1 {
position: relative;
z-index: 5;
}
.svc-title {
position: relative;
font-size: 20px;
font-family: 'Heebo';
float: left;
left: 20px;
top: 10px;
opacity: 1;
color: #a2a3a7;
z-index: 6;
}
#section-1 is the parent of the navigation links
The span disappears because its z-index CSS property is lower than the other elements. Add a higher z-index property value to '.svc-title' and the span will stay visible:
.svc-title{
position:relative;
font-size:20px;
font-family:'Heebo';
float:left;
left:20px;
top:10px;
opacity:1;
color: #a2a3a7;
z-index:100001;
}
In the photoset block it had this hover with a "readmore" text that appeared when I hovered over the picture. All I did was replace inside the readmore block with the CMS caption
This has caused the hover to not work right as the block and the caption appear separately.
The website is compassionlens.photo to check out the full code but the CMS elements do not populate in dev tools. Let me know if you need to see more of the code. Can you help me figure out how to make the caption appear when I hover over the photo?
{block:Photo}
<figure>
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="
{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{/block:PermalinkPage}
{block:IndexPage}{LinkOpenTag} <img src=" .
{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}"
height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{block:Caption}<figcaption>{Caption} .
</figcaption>{/block:Caption}
{/block:IndexPage}
</figure>
{block:PermalinkPage}
<div class="post_photo_content_wrapper">
{block:Caption}
<div class="post_content">{Caption}</div>
{/block:Caption}
<div class="post_actions
{block:Caption}with_caption{/block:Caption} clearfix">
{/block:Photo}
.post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption {
opacity: .75;
}
.post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption {
opacity: .75;
}
I think i understand what you want now. I have made it work using
the CSS hover effect as show below
.image {
width: 400px;
}
.overlay {
position: absolute;
top: 30px;
left: 40px;
height: 100px;
width: 100px;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.image:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="image">
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="google">
<div class="overlay">
<p class="text">This is a text</p>
</div>
</div>
I think what you are looking for is tooltips. w3schools has a good site about them. This is what they look like
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here is the site if you want to learn more
https://www.w3schools.com/css/css_tooltip.asp
Edit:
If you want to do this for an image, take a look at this other post
Tooltip on image
Here you will see that you need to use the attribute "title", just as shown below
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="alternative text" title="this will be displayed as a tooltip"/>
I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!
You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.
I've implemented click event on .parent_2, but when I click on it, it does not work on iPAD.
Please help.
HTML:
<div class="parent_1">
<div class="parent_2">
<svg></svg>
</div>
</div>
CSS:
.parent_1 {
position: absolute;
top: 16px;
bottom: 0;
z-index: 3;
overflow: hidden;
width: 320px;
border-radius: 0 0 0 3px;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.parent_2 {
position: absolute;
top: 7px;
right: 7px;
z-index: 3;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
}
svg {
position: absolute;
top: 5px;
left: 5px;
display: block;
-webkit-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out;
pointer-events: none;
}