I put an image on :after, with a translation on :hover. It makes other unrelated elements move on Chrome, with OS X (Firefox: unresponsive, and Safari : doesn't support transition effect)
I tried without transition, works fine.
I have this on several elements, and they all have this same problem as long as transition and :after are involved.
Here's the html:
See the project
and the css:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 10px 70px 10px 10px;
margin-top: 6px;
line-height: 1;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap; }
.btn-call-to-action:after {
content: url('../img/general-white-arrow.svg?1370787761');
position: relative;
display: inline-block;
position: absolute;
top: 8px;
width: 35px;
padding-left: 15px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
and the live version here.
Related
http://jasperalani.com/
If you hover over the logo at the bottom left of the page it becomes super pixelated when you hover over it.
I am using
transform: rotate(360deg);
How can I fix this so it maintains its quality?
That's because you are making you image to transform:rotate(360deg);, instead of that target you parent element .socialmedia and try it works.
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
<div class="socialmedia">
<a href="https://ello.co/jasperalani">
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
</a>
</div>
This is a known problem on Google Chrome.
Usually, you can overcome the problem by adding -webkit-backface-visibility: hidden to your element you rotate. In your example it will remove the anti aliasing entirely, though.
This is, because you are using transition instead of transform, so to fix the problem you rather add outline: 1px solid transparent to the CSS of your image. This will solve the problem.
img {
width: 21px;
height: 21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
outline: 1px solid transparent;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
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 am trying to create a background border around some text. For some reason the border around the text cuts at the top. It still wraps around the text, but the top is cut off.
Here is my css code for the text background:
.blue_bg{
background-color: blue;
padding: 5px;
border:1px solid;
border-radius:30px;
max-width:100%;
overflow: hidden;
}
extra:
Here is the css that changes the text and when I take this code out the text changes, but the text border works as intended.
Here is the code:
.market-product-overlay {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
color:white;
position: absolute;
left: 0%;
top: 50%;
margin-top: -20px;
text-align: center;
width: 100%;
height: 100%;
opacity: 100;
filter: alpha(opacity=0);
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
overflow: hidden;
opacity: 1;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
Found the problem. overflow:hidden in the market-product-overlay was the problem! took that out
I have some minor problems with some CSS pseudo-elements.
I am trying to make my custom tooltip, fade in and out, when hovering, but it doesn't seems to work.
The pseudo-element, are getting the content from an data-title HTML5 tag.
I have tried this, without any luck:
span:before, span:after {
opacity: 0;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
span:hover:after {
content: attr(data-title);
display: block;
opacity: 1;
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
border-radius: 3px;
left: -20px;
top: 46px;
}
The tooltip shows properly, but without the transition. I have also tried to add a content: "" in the span:before, span:after section, without any luck either.
Here's the fiddle: http://jsfiddle.net/nDq9f/3/
Anyone who can help me please?
I got i fixed!
I but all the styling (display, width, height etc...) in the span:before, span:after part, instead of in the :hover part. Then it all worked perfect!
You can see the fiddle in the bottom of this post.
span:before, span:after {
content: attr(data-title);
display: block;
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
border-radius: 3px;
left: -20px;
top: 46px;
opacity: 0;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
span:hover:after {
opacity: 1;
}
I also added a pointer-events: none; so you can't make the tooltip appear when hovering it, when it has opacity: 0;
Here's the js Fiddle
Try to change this in your span:before, span:after:
span:before, span:after {
content: attr(title);
filter: alpha(opacity=00);
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-ms-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
NOTE: the content: attr(title); property makes all sense
The arrows before the title are displayed using a :before. The problem only occur on Internet Explorer.
// edit : Mistake there, my styling is on p a.
Maybe is it the issue ?
So, here's the code:
.special-title {
font-size: 24px;
color: #a4a19e;
line-height: 1.2;
position: relative;
padding: 8px 0 8px 38px;
border-top: 1px solid #e2dbcf;
border-bottom: 1px solid #e2dbcf;
margin-top: 49px;
margin-bottom: 25px; }
.special-title:before {
content: url('../img/general-title-decoration.svg?1369571463');
position: absolute;
width: 28px;
left: 0;
top: 23px;
margin-top: -13px; }
and for the button:
.btn-call-to-action a {
background: #8e8287;
color: #f5f3e2;
padding: 2px 60px 2px 10px;
height: 35px;
line-height: 40px;
margin-top: 6px;
display: inline-block;
position: relative;
border-radius: 2px;
height: 40px;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action a:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
.btn-call-to-action a:hover {
background: #6f6469;
border-bottom: none; }
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
and here's the live site: http://aurelieremia.be/tfa/
In .special-title:before, since you're using absolute positioning, remove
margin-top:-13px;
and just use
top:10px;
instead. Then, declare a height as well as a width.
see http://jsfiddle.net/6TdB6/