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;
Related
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;
}
I want to add transition animations to a border
I am using SCSS :
display: flex;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}
This code didn't work , I need a way to add the transitions but I don't know how !
The browser doesn't know how to change from a colour that isn't set, so you simply need a colour to transition from. In this case I've used transparent:
div {
border: transparent;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}
}
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!
Currently working on MAC Yosemite and trying to test out a website I'm developing on XAMPP (newest version) and Sublime Text. Just downloaded an image from the internet and saved into my htdocs file. When I submit index.html into my url for testing, that image is not displayed. However, when I open the same file like:
file:///Applications/XAMPP/xamppfiles/htdocs/index.html
the image is shown perfectly? Here's the code:
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Browse" />
</form>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
Would it look different from testing it out in
file:///Applications/XAMPP/xamppfiles/htdocs/index.html
than localhost/index.html
What is causing this?
set permissions so image is readable by webserver.
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.