I am trying to do simple tooltip only with css3 and html, but the transition doesn't work. What am I doing wrong?
HTML
<p>
This has tooltip
</p>
<div class="tooltip">Tooltip content</div>
CSS
p {
width: 200px;
background-color: aqua;
padding: 10px;
margin-top: 50px;
}
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: 0px;
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
display: block;
opacity: 1.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
http://jsfiddle.net/MCDg4/
Update / Alternate solution
For a modern browser CSS3 solution you could use pseudo elements..
<span data-tooltip="I am the tooltip">This has a tooltip</span>
and
[data-tooltip]{
position:relative;
}
[data-tooltip]:before{
content:attr(data-tooltip);
position:absolute;
bottom:110%;
padding:10px;
background:#666;
opacity:0;
color:white;
font-size:smaller;
-webkit-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition:opacity 1s ease;
pointer-events:none;
}
[data-tooltip]:hover:before{
opacity:1;
}
Demo at http://jsfiddle.net/BJ2tr/
(this could be done without pseudo-elements by nesting the tooltip inside the elements that it refers to, and adjusting the css accordingly)
Unfortunately when you change display from none to something else, you cannot have transitions.
Instead of display:none you could just offset it outside of the window (with top:-9999px) and bring it to position when showing it.
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: -999px; /*CHANGED THIS AND REMOVED display:none*/
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
opacity: 1.0;
top: 0px; /*ADDED THIS AND REMOVED display:block*/
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
This will, however, not fade out (only in) since it moves it away on mouseout (so it actually does fade but you do not see it because it is outside the viewport)..
Explanation
You put transition only on opacity, while when changing to display:block; it is shown as a block with opacity:1; by default.
Solution
(JSFiddle)
Delete the display:none; and display:block on your tooltip element.
Related
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I have an image that I am trying to have smoothly transition into another image using content: url. It works in changing the images abruptly, however I cannot figure out how to apply the transition to actually make it smoothly transition from one image to another. Is it possible to do this using content?
Here is a JSFiddle showing what I have going on.
You Should use Before after and set opacity and transition on them
In .tidingsimg:after class we add position:absolute and top: 0;margin-top: 10px; Because without it after style will go far below before style
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I'm trying to change a div opacity depending on having the class active or not.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
Follows my CSS code:
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
Thank you
[EDIT]
One of the problems was that I change the css property to "block" and "none". The other was solve by the answer choosen.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
You need to combine the classes like so.
As it was you have .highlight as a child of .active.
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
.high-light.active {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
The problem here is not the transition, it's the height 100% which is not taking effect because the parent element (body) is not tall 100%.
$('button').on('click', function(e) {
$("#multicanvasArea").toggleClass('active');
})
.high-light{
position: fixed;
width: 100%;
height: 30px;
top: 0;
background-color: black;
opacity:0;
left: 0;
color: white;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multicanvasArea">
<p class="high-light">Highlight</p>
<p class="">Other text</p>
</div>
<button>Toggle class</button>
Your code was 95% there, just a few tweaks I made seem to do the trick. Here is the new css:
#multicanvasArea .high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
Here is a link to a pen with a working example:
http://codepen.io/anon/pen/pEjrJo
this is a working example. The Javascript is only to toggle the class.
.box {
width: 200px;
height: 200px;
background: pink;
opacity: 0;
transition: opacity 3s linear;
&.active {
opacity: 1;
}
}
https://plnkr.co/edit/RZRygZieCUMVWiOVEJR8?p=preview
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
in my present code, button initially is visible and with the transition, it becomes hidden behind the box. What i want is "my button initially should be hidden and should appear with the transition". Thanks in advance..
P.S. No jQuery
<!DOCTYPE HTML>
<body>
<div id="anim">
</div>
<input type="button" value="this should be behind" id="btn" />
</body>
</html>
<style>
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#btn{
z-index: -1;
position:fixed;
margin-top: 300px;
}
</style>
You can set the opacity of the button on hover without changing the structure of your document using the adjacent sibling selector.
Here's how:
#anim:hover + #btn
{
opacity: 1;
}
Edit: You can also delay this using transition-delay on the button:
#btn
{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
Below is the complete CSS, as some changes were also made to initially hide the button, and to properly set the z-index property.
JSFiddle here.
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#anim:hover + #btn{
opacity: 1;
}
#btn{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
I think this is what you want:
#anim{
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}
#anim:hover{
width: 600px;
}
#btn{
margin-left: 100px;
margin-top: 100px;
opacity:0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-ms-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
#anim:hover #btn{
opacity:1;
}
and add your button inside #anim div, just like this:
<div id="anim">
<input type="button" value="this should be behind" id="btn" />
</div>
and all this without javascript, only css.
JSBIN
What I'm trying to do here is get a transition when this div is hovered over.
Everything works fine, its just the transition that does nothing. I've tried using the transition properties with transition: all, transition: opacity and transition: background. But none of them work.
It's the display property that's doing it. Because when I take that out, it works. How else can I get around this? Because I obviously want to keep the display property, as it works on all browsers, young and old.
Here's what I've got at the moment:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0);
color: #fff;
display: none;
-webkit-transition: background 2s;
-o-transition: background 2s;
-moz-transition: background 2s;
transition: background 2s;
}
a:hover .matrix-overlay {
display: block;
background: rgba(0,0,0,0.5);
}
I don't mind if I'm using opacity or background or whatever to control the fading, I just don't know what else to do.
Looks like the display property isn't supported with CSS transitions (also see this SO question).
With that in mind, you have several options. You could initially set the width/height to 0 in your pre-transition, or offset the element off the page (something like margin-left: -9999px;), or set the opacity to 0.
In your case, I would probably use this:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0);
color: #fff;
display: block;
margin-left: -9999px; /* hide element off the page */
-webkit-transition: background 2s;
-o-transition: background 2s;
-moz-transition: background 2s;
transition: background 2s;
}
a:hover .matrix-overlay {
margin-left: 0; /* reset element position */
background: rgba(0,0,0,0.5);
}
Here's what I ended up doing:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0.7);
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease 0s;
-o-transition: opacity 0.2s ease 0s;
-moz-transition: opacity 0.2s ease 0s;
transition: opacity 0.2s ease 0s;
}
a:hover .matrix-overlay {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s;
-moz-transition: opacity 0.15s ease 0s;
transition: opacity 0.15s ease 0s;
}
you could use clip instead of display, as the element is absolutely positioned
Working Example
e.g.
.matrix-overlay {
...other properties, not display ...
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px,1px,1px,1px);
}
a:hover .matrix-overlay {
..other properties, not display ...
clip: rect(auto); /* IE7 */
clip: auto;
}
I put in the quirky IE7 code clip code for information, although IE doesn't do transitions anyway and you could feed it the display codes if you wanted to, but this way keeps them the same ;)
You can try the following:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0.7);
color: #fff;
opacity: 0;
pointer-events:none;
transition: opacity 0.2s ease 0s;
}
a:hover .matrix-overlay {
pointer-events:auto;
opacity: 1;
transition: opacity 0.15s ease 0s;
}
Using pointer-events:none and opacity:0 together will have nearly the same effect as display:none, but now the transition should work fine.