The problem is that in notepad++ it does not come up as grey which made me think that it isn't a correct part of the code but I'm not sure because I am a newbie. The thing I want it to do is to display the image and make is greyscale when I hover over it.
div.img2 {
position: absolute;
top: 0%;
left: 0%;
transition: grayscale 2s ease;
-webkit-transition: grayscale 2s ease;
}
div.img2:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
Your code above is perfectly sound, and does indeed make an image turn grey upon hover. Keep in mind that your selector div.img2:hover is applying the hover to a <div>, and that <div> needs to have a class of img2. The <div> would need to have a child <img> in order to showcase the hover.
It's possible that you were applying the class to the image instead (with <img class="img2">), and meant to write div .img2 (with a space). The space here indicates that the selector should target any elements with a class of .img2 that are a child of <div>.
Here you can see the CSS working as written in the original question:
div.img2 {
background: position: absolute;
top: 0%;
left: 0%;
transition: grayscale 2s ease;
-webkit-transition: grayscale 2s ease;
}
div.img2:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
<div class="img2">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
</div>
Hope this helps! :)
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I'm currently working on a code for a friend but I'm having issues with fading and am unsure how to proceed to complete it. My main problem is getting the image to fade back in after fading out. The opacity will return to normal once my mouse is no longer hovering over the image. However, rather than fading, the transition is instantaneous, which doesn't look very nice.
.top {
width: 580px;
height: 250px;
background-image:
url(http://i.imgur.com/RSelpFd.png);
}
div:hover {
opacity: 0;
filter: alpha(opacity=50);
transition: all 1s ease;
}
I know there are other ways to do this, but I'm still new to coding so I don't really understand them, so I was hoping there was a way to make what I've done work. Thanks ahead of time for the help.
JQuery is no needed. It's a very simple css implementation.
Hope this can help you.
https://jsfiddle.net/pablodarde/ggn89rp9/
HTML
<div class="top"></div>
CSS
.top {
width: 580px;
height: 250px;
opacity: 1;
filter: alpha(opacity=1);
transition: all 1s ease;
background-image:
url(http://i.imgur.com/RSelpFd.png);
}
div:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
Try this fiddle
https://jsfiddle.net/1c6s90wm/
Don't giving hover to the div rather give it to its class. Otherwise it ll work on all div tags
<div class="top"></div>
.top {
width: 580px;
height: 250px;
background-image:
url(http://i.imgur.com/RSelpFd.png);
// opacity: 1;
transition: all 1s ease;
}
.top:hover {
opacity: 0;
filter: alpha(opacity=50);
}
Use jquery could help.
$(document).ready(function(){
$(document).on('mouseover','div',function(){
$(this).css('opacity',0);
$(this).css('filter','alpha(opacity=50)');
$(this).css('transition','all 1s ease');
});
});
Note the 'hover' changed to 'mouseover' in jquery.
I want to rotate a frame but not the image inside it. Here is a JSFiddle that does the rotation but the image still moves. How can I keep the image stationary but move the frame only.
https://jsfiddle.net/q6n2w4qm/2/
HTML:
<body>
<div class="center">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
</div></div>
</div>
</div>
</body>
CSS:
.center{
width: 200px;
margin: auto;
margin-top: -50px;
}
.hexagon{
width: 200px;
height: 400px;
overflow: hidden;
visibility: hidden;
transform: rotate(120deg);
cursor: pointer;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.hexagon-in1{
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.hexagon-in2{
width: 100%;
height: 100%;
visibility: visible;
transform: rotate(-60deg);
background: url('http://lorempixel.com/g/250/350/city');
repeat: no-repeat;
position: relative;
}
.hexagon:hover{
-ms-transform: rotate(150deg); /* IE 9 */
-webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
transform: rotate(150deg);
}
1) PNG pseudo-mask overlay
I created a simple HTML/CSS solution, but is only possible with the following three criteria:
The background color behind the image is a solid color
There is enough margin on all sides of the image
You have Photoshop or some comparable image editing software
Working Example
body {
background-color:#222222;
}
.hex-hack {
position:relative;
top:0;
left:0;
}
.base-image {
position:relative;
top:0;
left:0;
z-index:1;
margin: 84px;
}
.hex-overlay {
position:absolute;
width:568px;
height:568px;
top:0px;
left:0px;
z-index:3;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.hex-overlay:hover {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
<body>
<div class="hex-hack">
<img class="base-image" src="https://lorempixel.com/output/technics-q-g-400-400-2.jpg" alt="" />
<img class="hex-overlay" src="https://i.imgur.com/zYa31Tw.png" alt="" />
</div>
</body>
Note that the margin of the top image is half of the difference between the widths of the bottom image and the top image to keep it centered.
How I Made the Hexagon Mask in Photoshop
I started with a 400 by 400 image on a 800 by 800 canvas and created a perfect circle around the image so that each corner pixel of the image touched the circle. I cropped the canvas down to the width of the circle (568px). The purpose of this is to guarantee that the image is completely covered as the hexagon mask rotates.
Next, I had to create a 350 by 400 hexagon with no fill, rotate it 30 degrees, and center it in the middle of the canvas. Then I selected the hexagon's pixels (ctrl + click the hexagon layer), inverted the selection (shift + ctrl + I), and filled a new layer with the #222222 background color. I hid every other layer and saved it as a png.
2) CSS clip-path and animate
Another possible solution for you to consider is to use CSS to animate an image's clipping path via the clip-path and animate properties. This might be an easier approach, however, the clip-path property is relatively new and doesn't have the greatest browser support - especially with IE, Edge, and Opera. Here are a couple resources to check out:
CSS Masking - Excellent article on the clip-path property (includes animation demo)
Clippy - Great tool for creating CSS clip-paths
3) SVG animation and clipPath
Finally, this is a very browser-friendly solution, but you'll need some software (like Illustrator) to create an SVG from an image. This is also something I have no actual experience with, but I'm positive it can be achieved with a little research, and some trial and error. Here are some resources to get you started.
SVG clipping/masking techniques
Animating SVGs with CSS
I've been trying for days to emulate a video editing effect using CSS3 with no luck. I have two background images (one on top of the other) and want to create an animation where I scale up or zoom the image on top while leaving the background image intact.
I have been able to successfully change the position of the top image while leaving the background intact, and I can also do an animation which scales both foreground and background images at the same time.
Here's some code to make this all a bit more clear:
My HTML:
<section id="about-photo" class = "light-bg img-bg" style = "background-image: url({% static "assets/images/art/cocuy-foreground.png" %}), url({% static "assets/images/art/cocuy-background.jpg" %});">
<div class="container inner">
<div class="row">
</div><!-- /.row -->
</div><!-- /.container -->
</section>
My CSS (only including webkit for sake of brevity)
#-webkit-keyframes hide {
from { background-position: 0px 0px, 0px 0px; }
to { background-position: 0px 300px, 0px 0px; }
}
#-webkit-keyframes zoom {
from {-webkit-transform: scale(1,1), scale(1,1) ;}
to {-webkit-transform: scale(2,2), scale(1,1) ;}
}
#about-photo {
background-repeat: no-repeat;
-webkit-animation-name: zoom;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
When I apply the animation called "hide" things work fine, but when I use "zoom" nothing happens.
Any ideas/tips would be greatly appreciated!
Dennis
Not sure if you actually need to use keyframes for this. You can simply use transition and transform to achieve this. I made a jsFiddle showing how you can do that. Also be aware that you want to include other vendor prefixes so your code works in all browsers.
#about-photo {
position: relative;
}
.light-bg {
width: 1000px;
height: 1000px;
background: url('http://www.broomehovercraft.com.au/graphics/bht/popups/gallery-sunset-6.jpg');
background-repeat: no-repeat;
}
.smiley {
position: absolute;
top: 10%;
left: 20%;
width: 100px;
height: 100px;
z-index: 2;
background: url('http://www.wpclipart.com/smiley/assorted_smiley/assorted_3/smiley_a_bit_angry_T.png');
background-size: 100px 100px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.smiley:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
<section id="about-photo" class="light-bg img-bg">
<div class="smiley"></div>
<!-- /.container -->
</section>
http://jsfiddle.net/augburto/44sbrooy/
The main thing to note is that on the element you wish to have a "zoom effect", you want to apply a transition so it knows that when a transform is applied to it, it will do it smoothly (if you don't have this, then it will do the action immediately.
Right now I have it so when you hover over the smiley, it will scale with a transform. However, you can easily change this to a class that you can apply. As long as your element has a transition, it will create that nice "zoom-in" effect. Then the actual scaling of the image can be applied to a separate class which you can apply whenever.
For more documentation on transitions, check out MDN.
If you really want to use keyframes, then update your question, but in my eyes it isn't necessary in this situation.
I'm using css transitions to cause a fade-in and fade-out effect on a background-image property. The property gets changed via jquery when the user scrolls.
It initially did not work on any browser. I found that setting an completley empty/transparent PNG file on the original element made chrome work, but the other browsers still don't.
Here's an example of the code:
nav {
background:url(/img/empty.png);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
}
.contrast {
background:#3a3a3a url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
}
The contrast class gets applied to the nav element via jquery. It only seems to fade out on most browsers, but not fade in. It works properly in chrome.
Q1: Is there a cleaner way to do this? Adding a transparent PNG as a background element to the nav element seems like a hack.
Q2: This still doesn't work on firefox, IE or Safari. Can anyone suggest a clean fix?
You can "fake" the background-image opacity with pseudo-element on your:
nav{
position:relative;
}
nav::before{
content: "";
background: url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
transition: opacity 1s ease-in-out;
}
.contrast{ // applied on nav::before
opacity: 1;
}
Thanks to Nicolas Gallagher for this.