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;
}
Related
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');
});
On my site Im using a CSS3 hover fade for my submit button. It correctly fades on hover, but when I remove the curser from the button it quickly changes back to the original color, it doesn't seem to be doing the 1 second fade back out.
.form-wrapper input[type=submit] {background-color:#0076A9}
.form-wrapper input[type=submit]:hover{
background-color:#7daed3;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease}
UPDATE:
.social-links {
color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;}
.social-links:hover {
color:#7daed3;}
You need to use ease-in-out. See: http://css3generator.com/
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
For the transition to effect ALL the properties, use (for social links):
.social-links a{
display: inline-block;
width: 43px;
height: 43px;
margin: 0 10px 10px 0;
color: #0076a9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Set the -webkit-transition-duration:1s; to the input without the hover in your css, like so:
.form-wrapper input[type=submit] {
background-color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;
}
.form-wrapper input[type=submit]:hover {
background-color:#7daed3;
}
Live example: http://jsfiddle.net/YgWYh/
I have used transition property to slide the mouse over background image from top to bottom.
css:
a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
How to change the transition effect from left to right?
html:
<div class="a"></div>
css:
.a {
background:url(http://a.static.trunity.net/images/132364/500x0/scale/butterfly-2.jpg) no-repeat;
background-position:left top;
display:block;
width:400px;
height:300px;
}
.a:hover {
background-position:400px top;
-webkit-transition:all 1s linear;
}
you can see it work on jsfiddle http://jsfiddle.net/bSyvP/1/
The problem started when I needed to have a div set at 60% opacity and on hover it animates to 90% opacity.
The only catch is I need a full white (non transparent) PNG image on top of this box at all times.
So I tried the trick of overlaying a separate div containing the image and used the margins to bring it into position; BUT the background div animation hover over doesn't work when your mouse is on top of the image.
HTML
<div style="position:relative;top:-1px;left:0">
<div class="ontop"><img src="http://www.designdownloader.com/item/pngs/button01_google/button01_google-20110813210436-00005.png" alt="OneSpring - Play Video" /></div>
<div id="box-video">
</div>
</div>
</div>
CSS
#box-video {
position: absolute;
background-color:rgba(0,57,129,1);
top: 0;
left: 0;
padding: 15px;
font-family: 'Helvetica Neue Light', Arial, Helvetica, sans-serif;
width: 210px;
height: 130px;
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
#box-video:hover, .ontop:hover {
cursor: pointer;
/*color: #ffffff;*/
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
zoom: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.ontop {
position: relative;
top: 4.7em;
left:30px;
z-index:1002;
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/xpancom/fZrWA/
How can you make the background hover work even when you are on top of the image?
You could alternatively use :before or :after pseudo class.
It will clean up your code a lot.
This is what your HTML can look like:
<div style="position:relative;top:-1px;left:0">
<div id="box-video"></div>
</div>
Here is more on them, and here is the fiddle: http://jsfiddle.net/jyHMf/
See if that is what you were looking for.
I think you're talking about CSS pointer-events property. pointer-events | MDN
So your code might look like this:
div.ontop {
position: relative;
top: 4.7em;
left:30px;
z-index:1002;
pointer-events: none;
}
http://jsfiddle.net/8CZEY/
Put an id on the container:
<div id="box" style="position:relative;top:-1px;left:0">
Now put the hover event on the container instead, and let it affect the child element:
#box:hover {
cursor: pointer;
}
#box:hover #box-video {
opacity: 0.9;
filter: alpha(opacity=90);
zoom: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
Demo: http://jsfiddle.net/fZrWA/2/
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