In the code below, there is an opacity transition which allows one image to fade out and reveal the one behind it. Overlaying both of these images is a logo image which is intended to remain in full view the full time of the transition, yet it does flicker out as the transition plays. (tested on chrome and firefox - seen on both)
How can i keep the logo constantly on top and in full opacity, while still having the underlying image fade work?
Please see the jsfiddle link at the bottom for a working example.
The HTML
<div>
<img id="bloomtop"
src="http://dev.kaizenauto.co/images/colorbloom.jpg">
<img id="bloombottom"
src="http://dev.kaizenauto.co/images/greybloom.jpg">
<img class="img-responsive z99"
src="http://dev.kaizenauto.co/images/drivenow.png">
</div>
The CSS
.z99 {
z-index:99;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
All this in action in a fiddle: http://jsfiddle.net/ax3dwbyo/2/
Thanks.
Simply add position: relative to your .z99 div, like this:
.z99 {
position: relative;
}
Here's a working demo:
.z99 {
z-index:99;
position:relative;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
<div>
<img src="http://dev.kaizenauto.co/images/colorbloom.jpg" id="bloomtop">
<img src="http://dev.kaizenauto.co/images/greybloom.jpg" id="bloombottom">
<img src="http://dev.kaizenauto.co/images/drivenow.png" class="img-responsive z99">
</div>
jsFiddle.
Related
When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears.
THE PROBLEM
If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help.
I need to remove all hover effects on my #image-divs
HTML
<div id="box">
<div id="icons1">
<div id="image1"></div>
</div>
<div id="icons2">
<div id="image2"></div>
</div>
<div id="icons3">
<div id="image3"></div>
</div>
<div id="icons4">
<div id="image4"></div>
</div>
</div>
CSS EXAMPLE
#box #icons1 #billede1 {
height: 450px;
width: 1000px;
margin-left: -186%;
margin-top: 150px;
background-image: url(../html_css/billeder/1.jpeg);
background-position: center;
background-size: cover;
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
Use pointer-events:none
div{pointer-events:none}
div:hover{color:red;}
<div>Hover over me</div>
best way is to use pointer-events:none;
#image-divs{
pointer-events:none;
}
Notice that you to specify every hover for every div while you are using id's, you need to specify the hover effect for every div, now you should use this :
#image1{
display:none;
}
#icons1:hover #image1
display:block;
}
this means, whenever you hover the icon1, image1 will be displayed, and so.
you can also try the opactiy:0; and opacity:1;
I'm using this to create a mouseover effect:
<a href="http://glim.pt/produtos/cadeiras">
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"
onmouseover=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png';"
onmouseout=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png';">
</img>
</a>
But I wanted it to be smoothly, how can I add fade effect? It's for a Wordpress page.
You can accomplish this using CSS transitions, if you aren't opposed to it as detailed in this blog post on crossfading images:
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
And then simply update your markup accordingly :
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Example
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Sounds like your going to want to add some javascript to that.
I recommend using the jQuery library.
https://jquery.com/
Here you can find a bunch of different fade effects and the documentation
http://api.jquery.com/
With jQuery:
$('a').hover(function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png"</img>').hide().fadeIn(2000));
}, function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>').hide().fadeIn(2000));
});
a {
display: block;
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#">
A link
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>
</a>
Some quick example, but you'll have to fix the issue of the image, that fades in, while the first image fades out. But the post above has much more better solution via css.
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
If this is what you mean? or what you are looking for? I tried to answer to the best of my ability.
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
I have two images. One over the other.
When I resize the browser window, the images must be placed at the same position. How do I achieve that?
Here is my html code:
<div id="stars-container">
<div id="star-1" class="stars"
data-1000p="position:absolute;opacity:0;"
data-1010p="position:absolute;opacity:1;"
>
<img src="img/stars/1.png" alt="">
</div>
</div><!-- end of stars-container -->
<!-- Pegasus bg starts -->
<div class="pegasus"
data-1000p="opacity:0;"
data-1270p="opacity:1;">
<img src="img/stars/horse1.png">
</div>
<!-- Pegasus bg ends -->
</div>
</div>
And here is its CSS:
#stars-container{
height:60%;width:50%;display:block;
position:relative;
top:14%;left:20%;z-index:9;
}
.stars{
position:relative;
z-index:9;
}
.stars img{
position:absolute;
width:100%;
}
#star-1{top:25%;left:30%;}
#star-2{top:20%;left:33.5%;}
#star-3{top:25%;left:35%;}
#star-4{top:30%;left:39%;}
#star-5{top:29.5%;left:41.5%;}
#star-6{top:35%;left:42.5%;}
#star-7{top:35%;left:51.5%;}
#star-8{top:30%;left:52.5%;}
#star-9{top:44%;left:48.5%;}
#star-10{top:55.5%;left:47.1%;}
#star-11{top:53%;left:42%; }
#star-13{top:56%;left:37.5%;}
#star-14{top:62%;left:33%;}
#star-15{top:54%;left:42%;}
#star-16{top:49.5%;left:37%;}
#star-17{top:52%;left:33%;}
#star-18{top:51.5%;left:30%;}
.pegasus{
width:50%;height:50%;
position:relative;left:20%;
top:-40%;
}
.pegasus img{
position:absolute;
width:100%;
}
So, basically there is an image of image of pegasus below the group of 18 stars. I am doing it for a parallax website.
You could add style tag to html code.
style="position:fixed;width:36px; height:36px; left:60px;top:50px"
For you the important parameters are left(x) and top(y).
You can use following code
<style>
.image1{
background : url('<path to image1>') no-repeat;
}
.image2{
background : url('<pat to image2>') no-repeat;
}
</style>
<div class="image1">
<a class="image2" href="#" style="left: 10px; top: 92px;"></a>
</div>
Above code will set image 1 as background image. I have used anchor tag for image above image1. You can use your own tag eg. img. Important thing is style that should be used is left and top. This will locate the image2 on top of image1 from 10px left and 92px top with repect to div's top, left = (0,0)
Try image cross fading.
More Info and demo :here
or fiddle
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div id="cf">
<img class="bottom" src="http://addnectar.co.in/ovenfresh/ovenfresh/admin/files/products/Sunny-29-07-2014-img-06-07-40.jpg" />
<img class="top" src="http://addnectar.co.in/ovenfresh/ovenfresh/admin/files/products/Sunny-29-07-2014-img-07-45-01.jpg" />
</div>
I have an image, on hover i will animate it to fade out to opacity: 0.4;, the fading out is fading to white, but i liked to fade to black, so i found a solution is to change the background color of the body to black. Then my fadeout will be towards black. So the plan i'm trying to do is create a div with black background to have the same width and height as my img but i don't know how to do it.
HTML
<div class="container">
<div class="img_section ">
<img class="eight columns test_img" src="images/wpdevshed-portfolio.jpg" alt="logo">
<h2 class="caption">Jack<br />Portfolio1</h2>
</div>
</div>
The width and height of my image is 500 by 500. So basically i want a black bg to be behind this image, so when i fadeout it will be towards black.. Anyone know of any simple ways that i can achieve it instead of using body{background-color:black};?
You can acheive this by giving background to parent div. Below is the simple code that helps you.
FIDDLE: http://jsfiddle.net/kiranvarthi/ar387hav/
CSS:
.container {
background: #000;
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.container img:hover {
opacity:0;
}