I'm creating a 3D tilted frame. After creating it my fonts and my images are blurry for some reason. I tried to research the issue but no luck. Code is down bellow.
Note : When I zoom-out in edge , it's not anymore blurred , but then rotateY get highed deg.
.testL{
transform: perspective(1500px) rotateY(15deg) ;
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
transition: transform 1s ease 0s;
}
.testR{
transform: perspective(1500px) rotateY(-15deg);
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
transition: transform 1s ease 0s;
}
Related
I'm experiencing an odd bug.
Even with -webkit-transition included, color fades on safari aren't seeming to work for me. Works fine on chrome. Also, I'm using NextJS, hence the inside of the .
The color does change on hover, but only on chrome does it actually fade. On safari it's just a quick switch.
Heres a segment from my CSS
.socialThird{
#include flex-center();
height: 100%;
.iconA{ // anchor tag
height:50%;
width: 75px;
transition: all ease-in-out 0.25s;
padding: 10px 8px;
.emailSVG{ // svg
fill: #333;
filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-o-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-ms-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-moz-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-transition: all ease-in-out 0.25s;
-moz-transition: all ease-in-out 0.25s;
-o-transition: all ease-in-out 0.25s;
transition: all ease-in-out 0.25s;
height: 100%;
width: 100%;
&:hover{
fill: #00bcc5;
}
}
&:hover{
cursor: pointer;
transform: translate(0px, -6px);
}
}
}
Hopefully this was enough information, thanks!
I want top and box-shadow attributes execute with animation .I wrote this codes but only box-shadow run with animation.I want my animation executed such as this. How to fix this?
.popup {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.popup:hover {
top: -10px;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
}
can you give us the initial value of 'top' ?
if you use a framework like boostrap, semantic-ui,
add (!important)
top: -10px important;
section#lBox{
background-color: rgb(168, 0, 0);
border: 1px solid rgba(0,0,0,.15);
border-radius: 0px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 4px rgba(0,0,0,0.2);
margin: 100px auto; /*aligns center*/
padding: 24px;
width: 500px;
opacity: 0.5;
-webkit-transition: all 5s linear;
transition: background-color 5s;
-moz-transition: all 5s linear;
}
section#lbox:hover {
/*background-color: rgba(168, 0, 0, 0.8);
box-shadow: 0px 0px 500px; */
opacity: 0.8;
}
I have been trying to fix it for half an hour and can't seem to find why the transition isn't working. It is supposed to make the translucent box more opaque when the mouse cursor is over it.
Look at this:
section#lBox {
That has a capital letter B in lBox.
Then look at this:
section#lbox:hover {
This has a lowercase b in lbox.
Assuming your box has an id="lBox", the hover opacity: 0.8 part will not work, as CSS is case-sensitive, and lbox and lBox are two different things.
So what you should do is just change this:
section#lbox:hover {
To this:
section#lBox:hover {
And it should work.
Ok, I have the following code: https://jsfiddle.net/7u1aLxaw/
So the issue is that when you hover over an image, it shows an overlay with a name specific to that image. But if the name is longer than the image width, the image immediately to the right is pushed away and the overlay isn't centered on the image. It expands just to the right, not on both sides.
I can't work out how to center the overlay and avoid it effecting divs on either side of it.
*I tried using display: none, but I want to preserve the CSS3 transitions. Using display: none to completely remove the element removes the CSS3 transition.
Any ideas?
Change your .item_overlay style to:
.item_overlay {
height: auto;
width: auto;
margin: 0 auto;
margin-top: -95px;
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Making the position absolute ignores the other elements position, then setting a negative top margin moves it back to the top. http://jsfiddle.net/q8SER/2/
Working jsFiddle: http://jsfiddle.net/q8SER/3/
I had to change a whole bunch of stuff to make it work.
First of all, I changed the HTML structure and placed the overlay div before the icon div.
Here is the new overlay CSS:
.item_overlay {
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Now, because the inner div (overlay) overflows the parent div, I couldn't center it conventionally with auto margins, so I implemented a jQuery solution.
JS code:
$(".item_overlay").each( function() {
var offset = ($(this).parent().width() - $(this).width()) / 2;
$(this).css("left", offset + "px");
});
Hope that helps.
I have this bit of CSS that results in images popping out a bit when the you hover over them:
a img
{
-webkit-transition: -webkit-transform 0.3s ease;
-moz-transition: -moz-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
transition: transform 0.3s ease;
}
a:hover img
{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
The problem is that this applies to all images, including my banner. Is there anyway to exclude the banner image?
If you can reference that banner image with a class or id, and you're okay with spurning your IE8 users, the CSS3 selector :not() could work wonders.
A jsfiddle for you to look at.
An update to the above Fiddle that's a bit more complex.
Besides IE8, every other major browser, and IE9, have support for this. Firefox and Safari support go back as far as version 1, assuming this site is correct.
Reference all hover images with a class name. That will separate them from images that do not have a class.
Ex:
<img class="hoverme" src=".." />
<img class="hoverme" src=".." />
<img src=".." />
.hoverme:hover{
..
}
Only images with hoverme class will be effected.
Sure, but it's not very elegant-looking. If your banner has an id, just override those attributes (hopefully I know what I'm doing):
a img#banner
{
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
a:hover img#banner
{
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}