I have an image which its background changes in hover and I want to add hover to it.
here is what I want to add:
-webkit-transition: all 1s ease-in-out;
And it is the online version:
http://jsfiddle.net/jmXdh/2/
DEMO
This is the solution that you are searching for!
HTML CHANGES
<a href="/">
<img class="imghover" src="http://i42.tinypic.com/2v9zuc1.jpg"/>
<img class="img" src="http://i40.tinypic.com/i3s4dc.png"/>
</a>
CSS IMPROVEMENTS
.img{
z-index:1;
margin-left: -190px;
margin-bottom:5px;
opacity:0;
-webkit-transition:opacity 0.5s;
}
.img:hover{
opacity:1;
}
.imghover{
z-index:-100;
}
Some CSS properties can't be animated, including background-image. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Related
I can see it working on Microsoft's website: https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/
But on the website I am currently working on, it only works some times.
For example, when I remove max-width on the img tag, the grayscale suddenly works, but then when I hover it, it stops working.
The filter was originally on an img tag, but I also tried on a div with the same result.
I know it might be too specific a case, but I can't seem to find anything related to this that might work. Is there some properties known to mess with filters in Edge?
EDIT
After tweaking around in the inspector, I have found that hiding a pseudo-element solves the grayscale bug.
.Cta:before {
position: absolute;top: 50%;left: 0;right: 0;bottom: 0;
display: block;content: '';z-index: 1;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));
background: -webkit-linear-gradient(top,hsla(0,0%,100%,0),#fff);
background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff);
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
Code sample
<div class="Cta">
<div class="cta-image">
<img src="{{baseUrl}}{{image}}" alt="{{title}}" />
</div>
<div class="cta-content">
<h3 class="cta-title">{{{title}}}</h3>
<h4 class="cta-subtitle">{{subtitle}}</h4>
</div>
</div>
CSS:
.Cta {position:relative;}
.Cta .cta-image {filter:grayscale(100%);opacity:0.2;}
.Cta img {display:block;width:100%;}
.Cta .cta-content {position:absolute;bottom:0;left:0;right:0;padding:0 30px 30px;}
Finally found the culprit, removing the z-index from my pseudo-element was clearing the bug.
Putting z-index on each element to specifically tell the order instead of relying on browser defaults resolved the problem of the grayscale filter not being applied.
.Cta {position:relative;}
.Cta:before {position:absolute;top:50%;left:0;right:0;bottom:0;z-index:2;content:'';background:/*gradient*/;}
.Cta .cta-image {position:relative;z-index:1;filter:grayscale(100%);opacity:0.2;}
.Cta img {display:block;width:100%;}
.Cta .cta-content {position:absolute;bottom:0;left:0;right:0;z-index:3;padding:0 30px 30px;}
I want to be able to float divs one, two and fin and at the same time have them not overlap upon the other. Right now as it is set up, when I have a look at it on a smaller screen, fin lands on top on top of two and two on top of fin.
Any kind of help in this direction will be appreciated.
Here is the html code:
<div class="iwrapper">
<div class="one">
<center>
<div id="i1">
</div>
<div>
<span class="img-tag">The BALD DESIGNER Look</span>
</div>
</center>
</div>
<div class="two">
<center>
<div id="i2">
</div>
<div>
<span class="img-tag">Meet TECHNODEN- My Home Design Space</span>
</div>
</center>
</div>
<div class="fin">
Grab my Resume
<div class="descpt">Facts about Me</div><div style="font-size: 90%; font-weight: 400; line-height: 1.7em;" >
> I love to go hiking and on adventure trails. This helps me often think of adventurous and innovative solutions to critical problems.
> Being a trained classical singer, I introduce new rhythm into my designs.
> I am good at finding an organization among my disorganized belongings and this helps me be clinical and find patterns during my research.
> And Yes, you may have guessed it by now; my favorite color is Green.
</div>
</div>
<div class="clear12fin"></div>
</div>
and here is the CSS associated with it:
.clear12fin{
clear: both;
}
.iwrapper {
width:99%;
}
#i1{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-picg.png");
width:300px; /*image width*/
height:300px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#i1:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-pic.png");}
#i2{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspaceg.png");
width:300px; /*image width*/
height:300px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#i2:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspace.png");}
.one{float:left; width:32%; margin-right:1%;}
.two{float:left; width:32%; margin-right:1%;}
.fin{display:inline-block; width:33%;
}
Set a min-width on .iwrapper
CSS
.iwrapper {
width:99%;
min-width: 930px; /* image width plus 30px for a 10px margin between divs*/
}
Have a fiddle - Fiddle Link!
Please use the #media query to make your page responsive... you can set the positioning of the elements based on the screen size by using #media in your css.. if you need help with that, let me know..
I know my question may look weird at first, but let me explain...
I have a div, named subcontainer which contains two elements :
Two icons and a link.
Basically, I want the div to make the two icons disappear on hover, BUT not my link. Here is my code :
<div class="subcontainer">
<img class="icons" src="images/arrow_right.png"/>
Follow me
<img class="icons" src="images/arrow_left.png"/>
</div>
**Edit : I want the icons to disappear on subcontainer:hover. Not on icons:hover.
If you have any questions to help me, just ask! :)
Use psuedo selectors:
View Here: http://jsfiddle.net/SinisterSystems/hajt6/3/
By doing it this way, you are telling it to only target the img elements that are children of the .subcontainer, but also allowing you to target the entire div without affecting the a element.
<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
Follow me
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>
CSS
.subcontainer:hover > img {
transition: 0.2s;
opacity: 0;
}
If you want to make the image fade, use the following CSS:
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.icons:hover{
opacity:0;
}
Here's a fiddle: http://jsfiddle.net/74wPn/
EDIT: Revised to fit asker's comment's needs.
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.subcontainer:hover .icons{
opacity:0
}
Updated fiddle: http://jsfiddle.net/74wPn/1/
Do this way:
.icons:hover {
display: none;
}
If you want it to disappear instantly:
.icons:hover {
display: none;
}
If you want it to do it over a set time period:
.icons:hover {
transition: 0.2s;
opacity: 0;
}
You can use jquery.
$(".icons").hover(function(){
$(".icons").hide();
});
I've got a menu bar that links to anchors on my page. At the moment there's content within the page which is animated to fade in using CSS3 on the initial page load but I'd like instead for them to fade in after the certain anchor link in the menu bar is clicked. How do I do that?
Eg. About is pressed then .aboutinfo CSS animation is activated.
Here is a demo to have an onclick even with CSS only (no javascript) http://jsfiddle.net/kevinPHPkevin/K8Hax/
CSS
#box1 {
display:none;
}
#box1:target {
display:block;
}
HTML
Click Me
<div id="box1">test test</div>
To do That You can use the '+' symbol
For eg.
if i want the color of a circle to change when i hover over a box then
Check out:
http://jsfiddle.net/utkarshd/Hh38R/
HTML
<div class="box"></div>
<div class="circle"></div>
CSS
.box{width:100px; height:100px; background-color:yellow;}
.circle{
width:100px;
height:100px;
border-radius:100px 100px;
background-color:orange;
-webkit-transition:all 0.7s;//for safari and chrome
-moz-transition:all 0.7s;//for mozilla
-o-transition:all 0.7s;//for opera
-ms-transition:all 0.7s;//for IE
}
.box:hover+.circle
{
background-color:blue;
}
This question already exists:
Closed 11 years ago.
Possible Duplicate:
thumbnails fade in fade out
I'm curios if it's possible to achieve this effect ( only the fade in/out )
with css3.
I have a similar thumbnails scroller and I want to create that effect without javascript, or if this is not possible could you help me with a simple solution for creating this with jquery ?
Thanks!
Yes this is possible with CSS3 transitions.
Here's an example: http://jsfiddle.net/fgasU/
code:
<img src="photo.jpg"/>
img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
img:hover{opacity:0}
This simple example will change the opacity on hover. Because a css transition is defined for 'all' properties, and they are given a 1 second transition with an ease-in-out easing function, the property change is animated.
Also, because it is a new property, the transition property must be preceded by the applicable brower's implementation. -webkit for chrome/safari, -moz for firefox/mozilla, -o opera, -ms microsoft.
The jQuery solution: Wrap the thumbnails in a trigger div, which is absolutely positioned over the image. Target that to fade the elements in and out.
For a CSS3 solution, refer to Vigrond's answer.
HTML
<div id="wrapper">
<img src="http://lorempixum.com/600/600" />
<div id="trigger">
<div id="thumbnails">
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
<img src="http://lorempixum.com/60/60" />
</div>
</div>
</div>
CSS
#wrapper { position:relative; }
#trigger {
width:100%;
height:80px;
position:absolute;
left:0;
bottom:20px; }
#thumbnails {
width:100%;
height:80px;
display:none; }
#thumbnails img {
margin:10px;
float:left; }
jQuery
$(document).ready(function(){
$("#trigger").hover(function () {
$(this).children("div").fadeTo(200, 1);
}, function(){
$(this).children("div").fadeOut(200);
});
});
See my fiddle:
http://jsfiddle.net/TheNix/Cjmr6/