How can I apply transition only on the links which have images instead of text. For example only in the second link:
no image
<img src="http://i.qkme.me/35rb4r.jpg">
The following CSS will apply transition on all links:
a{
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
a:hover{
opacity:0.1;
}
I've tried this and doesnt work.
a:hover img{
opacity:0.1;
}
Here's jsfiddle: http://jsfiddle.net/wg5b3/
a > img:hover{
opacity:0.1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
You cannot select a parent element via css. But you really can style the image directly, i.e.
a > img {transition: opacity 0.5s;}
a > img:hover {opacity 0.1;}
a img:hover {
opacity:0.1;
}
You may try this as well:
a{
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
a:hover #hello{
opacity:0.1;
}
no image
Related
Css Transition effects on my website don't work in safari (tested on latest version). And transition is working well in others browser tested in Chrome, firefox, and Opera.
My code is the following:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.navbar-inverse ul a::before{
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
How to fix it? After that transition works in safari too.
The problem is that you placed the transition property for the element with the pseudo element before. Try placing the transition property for the element itself. This is what I mean:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color,top 0.5s;
-o-transition: color,top 0.5s;
-moz-transition: color,top 0.5s;
transition: color,top 0.5s;
}
I have this image zoom effect. How can I make Open image page link to appear on hover in the middle of the image?
JSFIDDLE
You have to just add text-align:center to the <a> tag of the container_image class
Also, made some style changes in the <a> tag like following:
.container_image a {
margin-top: 5px;
display: block;
-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
text-align:center;
visibility:hidden;
opacity:0;
}
.container_image:hover a {
visibility:visible;
opacity:1;
}
I seem to be having trouble with the animation aspect of a hover description. The hover itself works fine and appears exactly where it is placed; however, there seems to be no fade effect when hovering over or away from the element. Instead, the description box appears sharply within the 0.5s listed in the CSS, and disappears the same way. I'm looking to create a smooth, transitioning effect, where the description box fades in and out. Can someone please help me adjust this?
CODE:
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
#description a {
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
#sidebar:hover #description {
opacity:0.6;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
Try this...
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#description a { color:{color:text}; }
#description:hover { opacity:0.6; }
Tried it itself in my code.
Just get rid off opacity and it will work.
See youtiming dot com for demo.
'opacity' is a css property that you need to specify the level value: http://www.w3schools.com/cssref/css3_pr_opacity.asp
Here is a live example on fiddle I just made
This is the HTML Markup
<div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>
This is the CSS
.kid {
max-width:250px;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}
Fiddle here: https://jsfiddle.net/cdsaekv9/7/
i have this code
http://jsfiddle.net/d2QwG/
When user hover on image after 1 sec the others change opacity:0.4.
But when the user goes to another image i want all the images to return to opacity:1and if he again hover over a sec the others to change opacity:0.4.
I understand that the rule
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
makes the problem but i want to keep this rule for another transition that i make when some <li> items are moving.
I want the visual result like i didnt have the above CSS rule but without deleting it.
I dont mind using javascipt,jquery.
EDIT:
I want this result:
http://jsfiddle.net/KJ8T4/
but i want also to have this CSS rule
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Pure CSS solution:
LIVE DEMO
#tiles{
margin:0;
list-style:none;
display:table;
border-collapse:collapse;
}
#tiles li {
vertical-align:middle;
display:table-cell;
padding:5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tiles li img{
vertical-align:middle;
}
#tiles:hover li{
opacity: 0.4;
}
#tiles li:hover{
opacity: 1;
}
You could to use JavaScript or jQuery for that.
Here's a Fiddle.
$('li').on("mouseout", function() {
$('img').css('opacity', '1');
});
Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves.
i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant
Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:
#myLink {
opacity: 0;
}
#myLink:hover {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
And here's a jsFiddle to demonstrate: Fiddle
Yes, just set the transition on the :hover rather than the link - http://jsfiddle.net/spacebeers/X4ZqE/
(in the Fiddle, the link is in the top left of the "result" box)
#main-menu li a {
opacity: 0;
}
#main-menu li a:hover{
opacity: 1;
transition: opacity 0.5s ease-in; /* vendorless fallback */
-o-transition: opacity 0.5s ease-in; /* opera */
-ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */
-moz-transition: opacity 0.5s ease-in; /* Firefox */
-webkit-transition: opacity 0.5s ease-in; /*safari and chrome */
}