I created a tooltip file
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 110%;
z-index: 9999;
color: #ffffff;
background: #333333;
padding: 10px;
transition: all 0.5s ease;
}
[tooltip]:hover:before {
opacity: 1;
}
[tooltip] {
position: relative;
}
/* other stuff */
#container {
width: 150px;
height: 50px;
background: red;
}
<div id="container" tooltip="Tooltip">Div with tooltip</div>
It works really fine but when hovering over the tooltips position, the hover effect triggers too. The hover effect should just get triggered when hovering over the element the tooltip is attached to.
How can I make the tooltip only appear when hovering the element?
You can remove the pointer-events from the tooltip:
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 110%;
z-index: 9999;
color: #ffffff;
background: #333333;
padding: 10px;
transition: all 0.5s ease;
pointer-events: none; /* add this */
}
[tooltip]:hover:before {
opacity: 1;
}
[tooltip] {
position: relative;
}
/* other stuff */
#container {
width: 150px;
height: 50px;
background: red;
}
<div id="container" tooltip="Tooltip">Div with tooltip</div>
Add pointer-events: none; to tooltip class.
It disables mouse events (clicking, dragging, hovering, etc.) on elements.
Hope this helps :)
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 110%;
z-index: 9999;
color: #ffffff;
background: #333333;
padding: 10px;
transition: all 0.5s ease;
pointer-events:none;
}
[tooltip]:hover:before {
opacity: 1;
}
[tooltip] {
position: relative;
}
/* other stuff */
#container {
width: 150px;
height: 50px;
background: red;
}
<div id="container" tooltip="Tooltip">Div with tooltip</div>
Related
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 5 years ago.
I have this project:
https://jsfiddle.net/3xw9aqew/
When a user hovers over the grey box, a red overlay appears with a green border/outline. However this border is applied to the overlay which has an opacity value applied to it on hover.
.image-container:hover .overlay {
opacity: 0.3;
}
I want the overlay to be translucent, allowing the image below to be seen, but I want the border around this to be solid so its a standard "green" colour. This is the CSS for the overlay:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: red;
border:10px solid green;
box-sizing:border-box;
}
How can i achieve this?
For the intended behaviour, apply the required transparency directly to the background-color property value instead of the containing element as a whole. This can be done by adjusting the rgba value as demonstrated in the embedded code snippet below.
opacity applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, the
element and its children all have the same opacity relative to the
element's background, even if they have different opacities relative
to one another.
opacity - CSS | MDN
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
Updated JSFiddle
Code Snippet Demonstration:
var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");
//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
lorem.classList.toggle("hdr-color-white");
ipsum.classList.toggle("hdr-color-white");
lorem.classList.toggle('hdr-left-middle');
ipsum.classList.toggle('hdr-right-middle');
});
body {
max-width: 100%;
overflow-x: hidden;
background: yellow;
font-family: sans-serif;
}
.container {
width: 85%;
max-width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
max-width: 920px;
}
p {
font-size: 18px;
color: blue;
font-weight: bold
}
p.left {
position: absolute;
top: 0;
bottom: 0px;
right: -32%;
transform: rotate(-90deg);
}
p.right {
position: absolute;
top: 0;
bottom: 0;
left: -32%;
transform: rotate(90deg);
}
h2 {
font-size: 5em;
position: absolute;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
margin: 0;
z-index: 5;
color: blue;
transition: all 0.5s ease-in-out;
}
.hdr-color-white {
color: white;
}
.hdr-left {
left: -12%;
top: -35%;
}
.hdr-left-middle {
left: 7%;
top: 40%;
}
.hdr-right {
right: -10%;
top: 110%;
}
.hdr-right-middle {
right: 7%;
top: 40%;
}
/*Hovers*/
.container:hover {
cursor: pointer
}
.container:hover>p {
color: red;
}
.container .image-container:hover {}
/*Hovers Ends*/
/*Overlay*/
.image-container {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.image {
display: block;
width: 100%;
height: auto;
outline: 5px solid blue;
}
.container .image-container:hover>.image {
outline: none;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
/*Overlay Ends*/
<div class="container">
<!--Rotated Text-->
<p class="right">Harolds</p>
<p class="left">Harolds</p>
<!--//Rotated Text-->
<h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>
<div class="image-container" id="imgContainer">
<img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
<!--colour overlay-->
<div class="overlay"></div>
<!--//colour overlay-->
</div>
<h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>
</div>
I want to create a tooltip (using css) that appears once the user moves the mouse over an element. I made it work for text, but I have problems making it work for an image.
.container {
position: relative;
width: 15%;
}
.image {
position: relative;
display: inline-block;
width: 100%;
height: auto;
}
.image .tooltiptext2 {
visibility: hidden;
width: 150%;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -8px;
left: 110%;
font-size: 150%;
font-family: Arial;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.image .tooltiptext2::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.image:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}
You can see what I did in this link:
https://jsfiddle.net/Ruloco/q3e4psh3/
I'll apreciate any help you could give me. Thanks in advance!!
.tooltiptext2 is not a child of .image. Using .image + .tooltiptext2 instead of .image .tooltiptext2 makes the tooltip work.
https://jsfiddle.net/8Lmz2oLj/
The tooltip isn't a child of the image. You need to amend your styles so that the image container is the thing you're listening for a hover on.
.container:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}
https://jsfiddle.net/q3e4psh3/1/
I need to center horizontally a button with aboslute position (because it must keep on top when to click and launch overlay and click to close overlay) on a position fixed topbar, here is the code:
.topbar {
text-align: center;
min-width: 100%;
height: 50px;
background-color: #29343a;
position: fixed;
top: 0;
}
.button {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(153,204,51,0.9);
}
Thats is just the css of the three parts, the website is more complex but i think that 3 parts are the key. the topbar must be fixed on top, the buton have to be centered into the topbar div, and the overlay launch and the buttop keeps on top of the overlay.
What is working: the overlay works fine and the button keeps on top but its not horizontally centered on the topbar.
How i can hack this?
You could to the left:0 and right:0 trick.
.button {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 0; /*added*/
right: 0; /*added*/
}
Or do the left:50% with negative left margin (half width).
.button {
display: inline-block;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 50%; /*added*/
margin-left: -30px; /*added*/
}
Or use CSS3 transform.
.button {
display: inline-block;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 50%; /*added*/
transform: translateX(-50%); /*added*/
}
Based on the information you provided this is what I could come up with:
/* CSS */
.topBar {
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
background-color:#29343a;
}
.overlay {
display:none;
width: 100%;
background: rgba(153,204,51,0.9);
margin:0;
}
.button, .button:active, .button:visited, .button:hover {
display: block;
position:relative;
text-align:center;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
margin:0 auto;
padding:10px;
}
.topBar:hover > .overlay {
display:block;
}
And I added some html because you didn't provide any:
<!-- HTML -->
<div class="topBar">
Button
<div class="overlay">
<p>Some text shows when button hover</p>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/0napm6y3/
Here is the complete code of this component made on react:
This is the react component, the overlay launch is the overlay var, the other one is for one animation on the button:
var React = require('react');
var StatusBarButtonView = React.createClass({
getInitialState: function() {
return {cliked: false};
},
handleClick: function(event) {
this.setState({cliked: !this.state.cliked});
},
render: function() {
var fondo = this.state.cliked ? 'active' : '';
var overlay = this.state.cliked ? 'open' : '';
return (
<div>
<div className={"aui-profit-statusbar-button-container " + (fondo)} onClick={this.handleClick}>
<img src="images/aui-navbar-element-icon-cross.png" className={"rotate " + (fondo)}/>
</div>
<div className={"overlay overlay-slidedown " + (overlay)}>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
);
}
});
module.exports = StatusBarButtonView;
Here is the topbar scss:
.aui-profit-statusbar-container {
text-align: center;
min-width: 100%;
height: 50px;
background-color: #29343a;
position: fixed;
top: 0;
}
Here is the button scss:
.aui-profit-statusbar-button-container {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 0;
right: 0;
&:hover {
background-color: #56d9f6;
}
&.active {
background-color: #ff4b39;
border-bottom: 2px solid #e43f30;
}
.rotate {
margin-top: 13px;
width: 23px;
height: 23px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0,2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.active {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here is the overlay css:
/* Overlay style */
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(153,204,51,0.9);
}
/* Overlay closing cross */
.overlay .overlay-close {
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: 20px;
overflow: hidden;
border: none;
background: url(../img/cross.png) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}
/* Menu style */
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #e3fcb1;
}
/* Effects */
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
#media screen and (max-height: 30.5em) {
.overlay nav {
height: 70%;
font-size: 34px;
}
.overlay ul li {
min-height: 34px;
}
}
Now it works perfectly, thanks to all.
Next thing i have to do is separate overlay of buttom component. and keep it running, but im wondering to to pass the action to one component to another.... i have to learn more about react.js
Right now I'm doing this to animate an element background color.
<style>
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element div {
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover div {
top: 0px;
transition:top 0.5s ease;
}
</style>
<div class="container">
<div class="element">some text<div>some text</div></div>
</div>
JsFiddle demo.
Is there any "cleaner" way to have the same animation? Right now I'm duplicating my content to achieve this.
You can use pseudo elements for this, and not have to duplicate any content:
It's basically moving one pseudo from above the element, and bringing it down over the element on the hover
div {
position: relative;
display: inline-block;
overflow: hidden;
}
div:before,
div:after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div>Text? Why would you ever want text?</div>
If you want the text to 'move' as well, you can do something similar:
div {
position: relative;
display: inline-block;
overflow: hidden;
height:20px;
width:300px;
}
div:before,
div:after {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div data-text="Text? Why would you ever want text?"></div>
Note: canIuse suggests it is widely supported (bit I admit only tested in latest chrome, so only going by this for cross browser). However, This may affect SEO, and so I would be reluctant to use this in production.
If you just wanted the 'upper' element to flow over the top of the text (instead of 'lower' text scrolling as well), You could do:
div {
position: relative;
display: inline-block;
overflow: hidden;
height: 20px;
width: 300px;
background: red;
}
div:before {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
top: -100%;
background: green;
}
div:hover:before {
top: 0;
}
<div data-text="The text I always wanted">The text I always wanted</div>
You could do it with background-position
Set a linear-gradient to 50% of each of the background colors and set the background size to be 200% of the actual div.
Then animate it and move the background 100% up. Like this:
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #c00 50%, #0c0 50%);
}
.element:hover {
background-position: 0 -100%;
transition: background-position 1s;
}
<div class="container">
<div class="element">some text</div>
</div>
This cuts out the need for any duplicate content in either the css or the html.
Yes, you can use pseudo element :before and get the text with attribute like:
<div class="container">
<div class="element" data-text="some text">some text</div>
</div>
And css:
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element:before {
content: attr(data-text);
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover:before {
top: 0px;
transition:top 0.5s ease;
}
http://jsfiddle.net/Pik_at/g3Lxrou4/3/
just similar to jbutler483, but using just a single pseudo class. FIDDLE
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
transition: top 0.5s ease;
overflow: hidden;
}
.element:after {
position: absolute;
top: -60px;
content: 'some text';
font-size: 20px;
line-height: 20px;
left: 0;
display: inline-block;
background-color: #0c0;
transition: top 0.5s ease;
}
.element:hover:after {
top: 0px;
}
<div class="element">some text</div>
Hello i am trying to create hover effect on img.
HTML
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
css
div {
width: 350px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
height: 100px;
opacity: 0;
transition: all 0.4s;
}
div:hover .link-cont {
opacity: 1;
bottom:-100px;
}
i need a something like this , when the user hover on it
but i am getting something like this
can someone help me to achieve what i am trying to do..
jsFid--> http://jsfiddle.net/Nnd7w/
You want like this, check DEMO http://jsfiddle.net/yeyene/Nnd7w/17/
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
Try this - and let me know if it works for you..
Fiddle
Just a few changes - Could use some cleaning up.
div {
position: relative;
top: 50px;
background-color: blue;
width: 350px;
height: 150px;
margin: auto;
}
.link-cont {
background: red;
position: relative;
left: -50px;
top: -200px;
width: 450px;
height: 250px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div a {
position: relative;
top: 210px;
left: 50px;
opacity: 0;
}
div:hover .link-cont {
opacity: 1;
}
a {
text-decoration: none;
color: #fff;
}
div:hover a {
opacity: 1;
}
Made a few modifications to you CSS
div {
width: 370px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
top: 0;
width: 370px;
height: 200px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
}
div:hover img {
margin-left: 10px;
margin-top: 10px;
}
.link {
display: block;
margin-top: 170px;
margin-left: 50px;
}
Instead of playing with bottom property, I just changed opacity. I also assigned a class to anchor tag to make it display under the image. Also, you can see I have given some margin to the image to make it center and changed the width and height of your link-count div.
See Fiddle
I just changed bottom:-100px; to top: 160px; and it works fine!
Fiddle
Edit: Some more options because I don't understand:
Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)