if you hover over a project some text will appear, but if you mouse over the text it kills the hover style because that's not what triggers the hover.
p.description {
position:absolute;
top:50%;
left:50%;
margin: 40px 0 0 -125px; /*offset 50px from center*/
transform: translateY(-50%); /*vertically centered*/
width:250px;
height:80px;
z-index:1000;
color: #ffffff;
opacity: 0;
}
.holder:hover p.description {
margin-top: 0; /*makes me slide up*/
opacity:1;
visibility:visible;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
p.description span {
font-family: 'aileronbold';
font-size: 110%;
}
This is my css for trying to accomplish this. I am not sure how to re-target to achieve this. Everything works as I want it minus when you mouse over the text.
You can check this at: http://darrenbachan.com/
Change the selector from .holder a:hover to .holder:hover a. You were seeing this flicker issue because the transition would end when you hover over the p description element that would transition in. By moving the :hover pseudo class to the parent element, the transition will remain intact even when you aren't hovering over the a element:
.holder:hover a {
opacity: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
In order for the anchor element to be positioned over the p description element, you could absolutely position it relative to .holder (since it's relatively positioned).
.holder a {
position: absolute;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Then remove z-index: 1000 from p.description.
It is a z-index issue:
z-index: 9999; /* Or anything more than 1000 */
Give the above z-index to .grow:
.grow {
z-index: 9999;
}
And just because you are using transition, that jerk happens. Guess there's no way.
Change
.holder:hover p.description
to
.holder:hover p.description, p.description:hover
A little bit of a hack, but it'll work.
P.S. Love the site! Very pretty.
Change
.holder a:hover {
opacity:0;
}
To
.holder:hover a {
opacity:0;
}
The key point is to prefix all hover style's selector with .holder:hover.
Related
I'm trying to create a hover button using the following code and it works relatively okay in all browsers except Chrome:
<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
<a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
<img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
</a>
</div>
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
background-color: #6d8e3b;
color: #fff;
content: "Learn More";
display: block;
font-size: 12px;
margin-left: auto;
margin-right: auto;
opacity: .9 !important;
padding: 18px;
position: relative;
top: 20em;
width: 70px;
z-index: 2;
margin-top: -3em;
}
For some reason, Chrome won't let you hover over the button without it glitching out and flickering super badly. Is there an easy way around this without having to add in a separate button?
Live Page: http://vina.typesetdesign.com/wines/varietal/
Fiddle: https://jsfiddle.net/35txpy8v/
It's flickering because the element moves while you hover over it. The reason the element is moving is because of the pseudo element's positioning. To work around this, I'd suggest absolutely positioning the pseudo element relative to the parent element. In doing so, the pseudo element's position won't have any effect on the parent element.
Updated Example
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
content: "Learn More";
background-color: #6d8e3b;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fff;
font-size: 12px;
opacity: .9;
padding: 18px;
width: 70px;
z-index: 2;
}
I have the following css rule:
button:hover:after {
content: ' ' attr(title);
}
Basically the button has a fontawesome icon as content and a title attribute. When you hover over the button, it will add a space and then the title to the button's content. See this JSFiddle
Now the question, how would I animate this? I want the new width of the button to be animated so it doesn't appear this static and ugly.
I got a solution, which works but might not be best fashion
button:after {
content:' ' attr(title);
visibility: hidden;
opacity:0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
font-size: 0;
}
button:hover:after {
content:' ' attr(title);
visibility: visible;
opacity:1;
transition-delay:0s;
font-size: 13px;
}
See working JSFiddle here
Background
Your approach is analog to using the display property. Therefore credits go to this Transitions on the display: property with my little hack to decrease the font-size to 0 in the initial :after state
Update
Even smoother transition:
button:after {
content: ' ' attr(title);
font-size: 0;
opacity: 0;
transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}
button:hover:after {
font-size: inherit;
opacity: 1;
transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}
See JSFiddle
It can work like this, but for this solution, you'll have to put fixed width to your button.
button:hover:after {
content: ' ' attr(title);
}
button:hover{
width:70px;
}
button{
width:20px;
overflow:hidden;
white-space:nowrap;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
http://jsfiddle.net/j3zw1thh/1/
I'm looking for css magic here. I want the user to hover over the box which already has the text on it. Then I need the black box to rise up from below and sit behind the text.
MY JS FIDDLE HERE!
I've got this:
<div class="box expanded">
Some text
</div>
My CSS:
.expanded {
height: 179px;
font-size: 20px;
padding-top: 130px;
position: relative;
z-index: 1000;
background-color: red;
transition: transform 0.4s;
}
.expanded:after {
content: '';
position: absolute;
height: 80px;
width: 100%;
bottom: 0;
left: 0;
z-index: -999;
background-color: #000;
transform: translateY(0%);
transition: transform 0.4s, opacity 0.1s 0.3s;
}
Add overflow:hidden to the parent, .box, and set the initial position of the pseudo element to top:100%. On :hover of the pseudo element, transition it to top:0 and add some transition properties to make it smooth.
UPDATED EXAMPLE HERE
.box {
overflow:hidden;
}
.expanded:after {
content:'';
position: absolute;
height: 80px;
width: 100%;
top:100%;
left:0;
z-index: -999;
background-color: #000;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
.expanded:hover:after {
top:0;
}
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
Put this in .expanded class
I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet button. I've tried the following.
HTML:
<div class="tweet-bttn">Tweet</div>
<div class="tweet-widget">
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
CSS:
.tweet-bttn{
position: relative;
top: -30px;
left: -10px;
display:block;
opacity: 1;
width: 80px;
padding: 10px 12px;
margin:0px;
z-index:3;}
.tweet-bttn:hover{
-webkit-animation-name: UpTweet;
-moz-animation-name: UpTweet;
-o-animation-name: UpTweet;
animation-name: UpTweet;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transition: -o-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;}
#-webkit-keyframes UpTweet {
0% {
-webkit-transform: translateY(0);
}
80% {
-webkit-transform: translateY(-55px);
}
90% {
-webkit-transform: translateY(-47px);
}
100% {
-webkit-transform: translateY(-50px);
}
... and all other browser pre-fixes.
}
I'm not sure what's going wrong. It looks like that as soon as I hover, it moves, but if I move the cursor one more pixel, it has to do a new calculation which causes the flickering.
I don't know why you need animations for this when you can simply achieve the above using transitions
The trick is to move the child element on parent hover
Demo
div {
margin: 100px;
position: relative;
border: 1px solid #aaa;
height: 30px;
}
div span {
position: absolute;
left: 0;
width: 100px;
background: #fff;
top: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div span:nth-of-type(1) {
/* Just to be sure the element stays above the
content to be revealed */
z-index: 1;
}
div:hover span:nth-of-type(1) { /* Move span on parent hover */
top: -40px;
}
Explanation: Firstly we wrap span's inside a div element which is position: relative;
and later we use transition on span which will help us to smooth the flow of the animation, now we use position: absolute; with left: 0;, this will stack elements on one another, than we use z-index to make sure the first element overlays the second.
Now at last, we move the first span, we select that by using nth-of-type(1), which is nothing but first child of it's kind which is nested inside div, and we assign top: -40px; which will transit when the parent div is hovered.
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.