I have page with a SVG in it and I want to use transition to change the color slow when hovering over the image. But I can't get it to work. Can anyone please see what I'm doing wrong?
fiddle:
http://jsfiddle.net/67vG4/1/
Html:
<svg height="67px" id="insta" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="path" d="M42.271,26.578v-0.006c0.502,0,1.005,0.01,1.508-0.002 c0.646-0.016,1.172-0.57,1.172-1.217c0-0.963,0-1.927,0-2.89c0-0.691-0.547-1.24-1.236-1.241c-0.961,0-1.922-0.001-2.883,0 c-0.688,0.001-1.236,0.552-1.236,1.243c-0.001,0.955-0.004,1.91,0.003,2.865c0.001,0.143,0.028,0.291,0.073,0.426 c0.173,0.508,0.639,0.82,1.209,0.823C41.344,26.579,41.808,26.578,42.271,26.578z M33,27.817c-3.384-0.002-6.135,2.721-6.182,6.089 c-0.049,3.46,2.72,6.201,6.04,6.272c3.454,0.074,6.248-2.686,6.321-6.043C39.254,30.675,36.462,27.815,33,27.817z M21.046,31.116 v0.082c0,4.515-0.001,9.03,0,13.545c0,0.649,0.562,1.208,1.212,1.208c7.16,0.001,14.319,0.001,21.479,0 c0.656,0,1.215-0.557,1.215-1.212c0.001-4.509,0-9.02,0-13.528v-0.094h-2.912c0.411,1.314,0.537,2.651,0.376,4.014 c-0.161,1.363-0.601,2.631-1.316,3.803s-1.644,2.145-2.779,2.918c-2.944,2.006-6.821,2.182-9.946,0.428 c-1.579-0.885-2.819-2.12-3.685-3.713c-1.289-2.373-1.495-4.865-0.739-7.451C22.983,31.116,22.021,31.116,21.046,31.116z M45.205,49.255c0.159-0.026,0.318-0.049,0.475-0.083c1.246-0.265,2.264-1.304,2.508-2.557c0.025-0.137,0.045-0.273,0.067-0.409 V21.794c-0.021-0.133-0.04-0.268-0.065-0.401c-0.268-1.367-1.396-2.428-2.78-2.618c-0.058-0.007-0.113-0.02-0.17-0.03H20.761 c-0.147,0.027-0.296,0.047-0.441,0.08c-1.352,0.308-2.352,1.396-2.545,2.766c-0.008,0.057-0.02,0.114-0.029,0.171V46.24 c0.028,0.154,0.05,0.311,0.085,0.465c0.299,1.322,1.427,2.347,2.77,2.52c0.064,0.008,0.13,0.021,0.195,0.03H45.205z M33,64 C16.432,64,3,50.568,3,34C3,17.431,16.432,4,33,4s30,13.431,30,30C63,50.568,49.568,64,33,64z" />
</svg>
Css:
#insta {
display: block;
float: right;
margin-bottom: 10px;
height: 40px;
margin-right: -12px;
-webkit-transition: fill 2s;
-moz-transition: fill 2s;
-o-transition: fill 2s;
transition: fill 2s;
}
#insta:hover {
fill: #ff0000;
}
Ok, I've tried a couple of different things and the only thing that seems to work for me (except changing browser) is when I remove everything but the svg from my body section. Does that mean that I have coded anything wrong you think?
I think your syntax isn't right for the transition.
Try:
-webkit-transition: fill 2s ease-out;
transition: fill 2s ease-out;
Also if you set the transition on #insta:hover it will transition back.
#insta:hover {
fill: #ff0000;
-webkit-transition: fill 2s ease-out;
transition: fill 2s ease-out;
}
Its working fine for me (Using Chrome 34), just edited the CSS to show the full image.
The HTML:
<!DOCTYPE html>
<body>
<svg id="insta" style="enable-background:new 0 0 67 67;" width="100" height="100">
<path id="path" d="M42.271,26.578v-0.006c0.502,0,1.005,0.01,1.508-0.002 c0.646-0.016,1.172-0.57,1.172-1.217c0-0.963,0-1.927,0-2.89c0-0.691-0.547-1.24-1.236-1.241c-0.961,0-1.922-0.001-2.883,0 c-0.688,0.001-1.236,0.552-1.236,1.243c-0.001,0.955-0.004,1.91,0.003,2.865c0.001,0.143,0.028,0.291,0.073,0.426 c0.173,0.508,0.639,0.82,1.209,0.823C41.344,26.579,41.808,26.578,42.271,26.578z M33,27.817c-3.384-0.002-6.135,2.721-6.182,6.089 c-0.049,3.46,2.72,6.201,6.04,6.272c3.454,0.074,6.248-2.686,6.321-6.043C39.254,30.675,36.462,27.815,33,27.817z M21.046,31.116 v0.082c0,4.515-0.001,9.03,0,13.545c0,0.649,0.562,1.208,1.212,1.208c7.16,0.001,14.319,0.001,21.479,0 c0.656,0,1.215-0.557,1.215-1.212c0.001-4.509,0-9.02,0-13.528v-0.094h-2.912c0.411,1.314,0.537,2.651,0.376,4.014 c-0.161,1.363-0.601,2.631-1.316,3.803s-1.644,2.145-2.779,2.918c-2.944,2.006-6.821,2.182-9.946,0.428 c-1.579-0.885-2.819-2.12-3.685-3.713c-1.289-2.373-1.495-4.865-0.739-7.451C22.983,31.116,22.021,31.116,21.046,31.116z M45.205,49.255c0.159-0.026,0.318-0.049,0.475-0.083c1.246-0.265,2.264-1.304,2.508-2.557c0.025-0.137,0.045-0.273,0.067-0.409 V21.794c-0.021-0.133-0.04-0.268-0.065-0.401c-0.268-1.367-1.396-2.428-2.78-2.618c-0.058-0.007-0.113-0.02-0.17-0.03H20.761 c-0.147,0.027-0.296,0.047-0.441,0.08c-1.352,0.308-2.352,1.396-2.545,2.766c-0.008,0.057-0.02,0.114-0.029,0.171V46.24 c0.028,0.154,0.05,0.311,0.085,0.465c0.299,1.322,1.427,2.347,2.77,2.52c0.064,0.008,0.13,0.021,0.195,0.03H45.205z M33,64 C16.432,64,3,50.568,3,34C3,17.431,16.432,4,33,4s30,13.431,30,30C63,50.568,49.568,64,33,64z" />
</svg>
</body>
The CSS:
#insta {
display: block;
float: right;
margin-bottom: 10px;
margin-right: -12px;
-webkit-transition: fill 2s;
-moz-transition: fill 2s;
-o-transition: fill 2s;
transition: fill 2s;
}
#insta:hover {
fill: #ff0000;
}
Here is the fiddle:
http://jsfiddle.net/kBM9U/1/
Related
I have an image tag in my html and below is my html element when user logins into the application it becomes blur but if user hovers on that i need to unblur it and display the text which is present in that image.How can i do this?
what i tried?
img {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}
<img src="https://dummyimage.com/300x300" width="109" height="19" style="vertical-align:top;" border="0">
but its not working
You could add a class attribute on your <img> element that has a :hover pseudo-selector like this:
.blurred {
opacity: .5;
}
.blurred:hover {
opacity: 1;
}
This results in the element having half the opacity initially and on hover it will have it's full opacity restored.
<img class="blurred" ...otherAttrs>
You dont clearly state how you achived the blur in your question, but assuming you used filter: blur(), then this will do the trick:
Your normal img tag should haver filter: blur(Xpx); applied
When hovering (img:hover) you just apply a blur of 0 (filter: blur(0);)
img {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
filter: blur(8px);
}
img:hover{
filter: blur(0);
}
<img src="https://dummyimage.com/300x300" width="500" height="200" style="vertical-align:top;" border="0">
Just set the blur value to 0px
EDIT
I think you should use class or id like this
<!-- added id attribute -->
<img src="https://realview/view-contact-number.gif" width="109" height="19" id="blur" border="0">
#blur {
vertical-align: top;
-webkit-filter: blur(10px);
}
#blur:hover {
-webkit-filter: blur(0px);
}
I am trying to make a simple css3 transition work with two items: an svg box (representing an svg drawn logo) and a <p> tag (representing a title name tag) behind it.
By default only the box should show and the text should be hidden. When the mouse hovers over the svg box, the box should dissappear with a simple css fade transition (or even better shadow blur for bonus points ;-) and then the name title should appear to focus (from shadowy blurr) all in say 1 second.
At the moment I'm stuck here since my code is broken to activate the mouse hover. What am i doing wrong at this stage? Isn't svg:hover p the correct selector for my last move? And how to set the transition fade effects? Thanks!
// UPDATED code with the Answer in snippet
* {margin: 0; padding: 0;}
.svg-container * {
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
}
svg {
position: absolute;
fill: rgba(0, 200, 0, 1);
z-index: 2;
top: 0;
left: 0;
display: block;
opacity: 1;
}
p {
position: absolute;
z-index: 1;
top:70px;
display: block;
color: rgba(0,0,200,0);
}
.svg-container:hover svg {
opacity: 0;
}
.svg-container:hover p {
color: rgba(0,0,200,1);
}
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="10" y="10" width="100" height="100"/>
</svg>
<p>Title of this Website</p>
</div>
You can't place elements inside the SVG.
You should place both SVG and paragraph inside a container, and set the hover effect to act on the container.
For the transition, use the transition property on each element, or just place it on all child elements of the parent.
Something like this:
<style type="text/css">
* {margin: 0; padding: 0;}
.svg-container * {
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
}
svg {
position: absolute;
fill: rgba(0, 200, 0, 1);
z-index: 2;
top: 0;
left: 0;
display: block;
opacity: 1;
}
p {
position: absolute;
z-index: 1;
top:70px;
display: block;
color: rgba(0,0,200,0);
}
.svg-container:hover svg {
opacity: 0;
}
.svg-container:hover p {
color: rgba(0,0,200,1);
}
</style>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="10" y="10" width="100" height="100"/>
</svg>
<p>Title of this Website</p>
</div>
Working on my friend's website and I can't figure out how to display the SVG right in Firefox. In Edge it also disappears while I'm resizing the browser.
http://lene.isreborn.com/
CSS - (I have to use important because it's Wordpress):
header::after {
content:"";
display: block;
background: url(/svg-filer/header-background.svg);
background-size: contain;
background-repeat: no-repeat;
top: 0;
left:-1%;
width: 102% !important;
height: 90px !important;
position: absolute;
z-index: -1;
-ms-transition: top ease .5s;
-moz-transition: top ease .5s;
-webkit-transition: top ease .5s;
transition: top ease .5s;
}
header.sticky-active::after {
top: -20px;
}
SVG File:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none">
<polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>
</svg>
I've got it right now:
The background-size does not work with 'contain' but with 100% 100%,
See
Mozilla Background rules
Link to developer site: See here
header::after {
content:"";
display: block;
background: url(/svg-filer/header-background.svg);
background-size: 100% 100% !important;
background-repeat: no-repeat;
top: 0;
left:-1%;
width: 102% !important;
height: 90px !important;
position: absolute;
z-index: -1;
-ms-transition: top ease .5s;
-moz-transition: top ease .5s;
-webkit-transition: top ease .5s;
transition: top ease .5s;
}
header.sticky-active::after {
top: -20px;
}
The image actually is white, right? If you change the fill-color to #000, you will see an image:
<polygon id="XMLID_3_" fill="#000" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>
https://jsfiddle.net/fbwsh1pf/
I've been trying to animate a svg border, I've gotten as far as this
html {
background: white;
}
div {
position: fixed;
height: 200px;
width: 605px;
position: fixed;
left: 30%
}
.mainNav {
position: fixed;
top: 6;
}
[class="navBorder"] .outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke: #7272f8;
stroke-width: 11px;
fill: none;
}
.navBorder .outline {
stroke-dasharray: 2000;
stroke-dashoffset: 1900;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.navBorder:hover .outline {
stroke-dasharray: 1100 0;
stroke-dashoffset: 0;
}
<div>
<a class="navBorder" target="_blank">
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="outline" height="100%" width="100%" />
</svg>
</a>
</div>
http://codepen.io/lorehill/pen/pEPXar
The problem is I can't seem to get the starting position of the border to be on the top center and then close center bottom.
I'm very confused trying to figure out how to calculate the values I need to set stroke-dasharray and stroke-dashoffset for the starting position in order to get the effect I'm after.
If anyone could explain it like I'm 5 that would be fantastic.
Thank you!
AFAIK, the starting position of the stroke is always the starting point of the rect which is top left for a rect element.
I can't seem to get the starting position of the border to be on the top center and then close center bottom.
I think you'll need two polyline elements for that, although you can use the same class on both.
svg {
height: 100px;
margin: 1em;
}
.outline {
fill: lightblue;
stroke-dasharray: 200;
stroke-dashoffset: 190;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
svg:hover .outline {
stroke-dasharray: 200 0;
stroke-dashoffset: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<polyline class="outline" points="50,0 100,0, 100,100 50,100" style="stroke:#660000; stroke-width: 3;" />
<polyline class="outline" points="50,0 0,0 0,100 50,100" style="stroke:#660000; stroke-width: 3;" />
</svg>
Codepen Demo
I use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?
HTML:
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
CSS:
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
height: 331px;
}
JSFiddle
One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:
html, body { background-color: #dedede; }
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
margin-top:331px;
}
.show:hover + #appear, #appear:hover {
margin-top:0;
height:331px;
}
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
Here's also a JSFiddle to demonstrate. (If I've misunderstood your intentions, please tell me.)
Hope this helps! Let me know if you have any questions.
checkout the fiddle https://jsfiddle.net/8paj437a/2/
I set position:absolute to the #appear div. and bottom:0; so it will take height from bottom.
And to keep it intact from top. I placed it within a container and give position relative to the container.
HTML
SHOW IT
<div class="container">
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
</div>
CSS
.container {
width: 308px;
height:331px;
position:relative;
}
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
position:absolute;
left:0;
bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
height: 331px;
}
By default, height transition works from top to bottom. But you can make it work from bottom to top with a very simple trick. All you need is to rotate the div to 180 degrees. This will rotate the transition direction as well. Try this css on your div.
transform: rotate(180deg);