So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>
Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/
Related
im trying to customize the flexslider (http://flexslider.woothemes.com/thumbnail-controlnav.html) in a way that when a user hovers on a navigation thumbnail to show an overlay with an icon. Something like this http://callmenick.com/_development/image-overlay-hover-effects/
by editing the flexslider js code i managed to add a div
<div class="thumb_overlay"></div><img src="'+s.attr("data-thumb")+'"'+c+"/>":''+t+""
but i couldnt move it to above the image although i set relative positions
http://jsfiddle.net/livewirerules/r4uthech/1/
Any help will be appreciated
Thanks
Just add this to your CSS:
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
If you prefer, here is your fiddle updated:
http://jsfiddle.net/r4uthech/2/
I hope this can help you. :)
im using flexslider to display a slideshow with thumbnails. recently i added a css code to show an overlay when the thumbnail is hovered. But the problem is when i click on the thumbnail nothing happens.
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
but when i remove the content: " "; block it seems to work or else nothing happens when the thumbnails clicked.
Here is a demo of the slider slider demo
Can someone tell me what am i doing wrong?
Try adding :after to the img element, change li:after to img:after
I´m trying to get the inverse effect of this code (jsfiddle-demo):
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
div.hoverText{display = none;}
I mean, I want a html code where its images are darkened and the darkeness disappears «on mouse over» -with a transition.
You just have to invert the opacity values :)
(the "base" background must have opacity < 1, and the ":hovered" background must have opacity = 1)
Here's a fork of you fiddle : http://jsfiddle.net/m1mcb66h/
a.darken img {
[...]
opacity: 0.7;
}
a.darken:hover img {
opacity: 1;
}
I think this should do the trick
instead of
opacity:0.7;
write
filter: contrast(150%);
I am assuming your .html is as follows:
<a class='darken'><img src='image1.jpg'></a>
<a class='darken'><img src='image2.jpg'></a>
I solved it like this:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img{
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img{
opacity: 0.7;
}
div.hoverText{display = none;}
Your last pseudoclass works fine also like this:
a.darken img:hover{
opacity: 0.7;
}
Please, provide .html for future questions.
I have a call to action button made of text that has an arrow > in it. I wanted the arrow to transition smoothly to the right on hover and then go back in place on hover out. Here's the HTML, CSS, and jQuery for the CTA button:
$("#lnkTech").hover(function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateOut");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateIn");
},function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateIn");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateOut");
});
/* CTA Styles */
.divCTA {
background-color: #00AA7E;
padding: 20px 0px;
text-align: center;
width: 12em;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
}
.divCTA:hover {
background-color: #009E75;
}
.divCTA a {
color: #fff;
text-decoration: none;
}
.divCTA a:hover {
color: #fff;
text-decoration: none;
}
.spnCTATxt {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.spnCTATxtArrow {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateIn {
position: relative;
left: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateOut {
position: relative;
left: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimate {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="divCTA">
<span class="spnCTATxt">Learn More <span class="spnCTATxtArrow" id="lnkTechArrow">></span></span>
</div>
What happens is upon load or refresh, the arrow quickly jumps top the right on first hover, then the transition kicks in on hover out, and on subsequent hovers, the transition works. I would like the transition to work every time, even on the first hover. I've even added the transition CSS to all the containers but I still get the same result.
Please help me fix this :(
the solutions is quite simple , you need to set an initial value to the element to the hover effect would start from this value to the transform value
so add to your css
#lnkTech > .spnCTATxtArrow{
left:0px;
}
i am using this example http://jsfiddle.net/MJTkk/2/ in order to find where the cursor is(left or right in my example). i also have two images and i want the second.png to hover over the other smoothly but to hover on the direction of the cursor(follow the cursor).
<div class="box" id="box" style="margin:100px 0px 0px 100px">
<a href="#" target="_blank">
<div class="under_div"></div>
<div class="over_div"></div>
</a>
</div>
.box {
position:relative;
width:100px;
height:100px;
}
.under_div
{
background-size: 100px 100px;
height: 100%;
width: 100%;
position: absolute;
background-image:url(http://s30.postimg.org/dd01lyrjx/first.png);
background-repeat: no-repeat;
background-position: top right;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.over_div
{
background-size: 100px 100px;
height: 100%;
position: absolute;
background-image:url(http://s21.postimg.org/wjrhdklar/second.png);
background-repeat:no-repeat;
background-position: top left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover .over_div
{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
i implement this http://jsfiddle.net/9yj8or2z/1/ because i do not know how to explain it correctly. sorry for my english.
i see that it does not work properly and the div moves when hover for some reason. if someone could help i will appreciate it!
You should remove your css code in the jquery function completely for .under_div
i updated your FIDDLE if this is what you want to achieve.
EDIT i updated the fiddle once again. you got to give the over_div if it's coming from the right (so in the else tag in the first function) a position: absolute; right: 0; left: auto; and in the second function right: auto; left: 0;
FIDDLE NO 2 BOTH DIRECTIONS WORKING
ask if you got any further questions, but this should be it!
If your problem is that the grey png is moving too on hover, I think that this solution works.
$(function() {
$("#box").hover(function(e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
$('.under_div').css({
"left":"0",
"width":"100px",
"background-position":"100% 0%"
});
$('.over_div').css({
"left":"0",
"width":"0px",
"background-position":"0% 0%"
});
if(edge=='left')
{
$('.over_div').css({
"left":"0",
"width":"100px",
"background-position":"0% 0%"
});
}
else
{
$('.over_div').css({
"left":"0px",
"width":"100px",
"background-position":"100% 0%"
});
}
}, function(e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
if(edge=='left')
{
$('.over_div').css({
"left":"0px",
"width":"0px",
"background-position":"0% 0%"
});
}
else
{
$('.over_div').css({
"left":"100px",
"width":"0px",
"background-position":"100% 0%"
});
}
});
});
function closestEdge(x,y,w,h) {
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(leftEdgeDist,rightEdgeDist);
switch (min) {
case leftEdgeDist:
return "left";
case rightEdgeDist:
return "right";
}
}
function distMetric(x,y,x2,y2) {
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}
.box {
position: relative;
width: 100px;
height: 100px;
}
.under_div {
background-size: 100px 100px;
height: 100%;
width: 100%;
position: absolute;
background-image: url(http://s30.postimg.org/dd01lyrjx/first.png);
background-repeat: no-repeat;
background-position: top right;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.over_div {
background-size: 100px 100px;
height: 100%;
position: absolute;
background-image: url(http://s21.postimg.org/wjrhdklar/second.png);
background-repeat: no-repeat;
background-position: top left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover .over_div {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="box" style="margin:100px 0px 0px 100px">
<a href="#" target="_blank">
<div class="under_div"></div>
<div class="over_div"></div>
</a>
</div>
I fixed some issues with it: http://jsfiddle.net/9yj8or2z/2/
By adding left: 0; and width: 0px; to CSS, and also adding overflow:hidden;, I could fix that the gray box was moving at the beginning wrongly, but still animates.
I hope this is what you were looking for :)