I'm trying to figure out, how to have two divs that would react to onmouseover event. One should overlay with picture the other, whereas the bottom div should contain another image and other elements such as buttons, text etc. Could you please show me, how I need to adjust my code, to make it work?
HTML:
<div id="container">
<div id="bottom" >
<img id="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
<p id="text">
Hello World!
</p>
</div>
<div id="top">
<img id="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
</div>
CSS:
#container img {
position:absolute;
height:400px;
width:400px;
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;
}
#top img:hover {
opacity:0;
}
#text{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
This is what I've got so far. But I'd need to display the Hello world only when bottom image is displayed.. As well if I'd have some button there, to make it react only in those situations.
http://jsfiddle.net/L7XCD/733/
The easiest way if you just want clickable elements on the bottom element, would be to just switch the top and bottom layer. So you make your top layer (including button and text) transparent and lay it over the visible image.
On hover you just blend it in.
If you do it the other way around the top image is blocking the clickevents.
I put a little example together here:
http://jsfiddle.net/L7XCD/732/
HTML:
<div class="container">
<div class="cat-image bottom">
<img class="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
<div class="cat-image top" >
<img class="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
<p class="text">
Hello World!
</p>
<button>Click meow!</button>
</div>
CSS:
.top {
position: relative;
opacity: 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;
}
.top:hover {
opacity: 1;
}
.bottom {
position: absolute;
top: 0;
}
#top {
z-index: 10;
position: relative;
}
#bottom #text {
z-index: 1;
}
That should do the trick.
Related
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.
I have 2 images on top of each other, positioned absolute, in my example they are square but in my real project they are pngs with some transparency in the borders so the one in the back needs to be hidden until it appears on hover.
My problem is I need the transition to have some kind of delay so that the back pic appears a bit before the one on top so you don't see the background in between. I have made a fiddle to illustrate this:
http://jsfiddle.net/L21sk0oh/
You can clearly see the red from the background, that shouldn't happen. Also there is some weird moving going on, I haven't noticed this in my actual project.
Also my HTML:
<div class="product1">
<img class="active" src="http://lorempixel.com/400/200/sports" alt="">
<img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>
And my css:
body{
background: red;
}
.product1{
position: relative;
width: 400px;
height: 200px;
}
img{
position: absolute;
top:0;
left:0;
}
.product1 img.active{
transition: all 1s ease-in-out;
opacity: 1;
}
.product1 img.inactive{
transition: all 1s ease-in-out;
opacity: 0;
}
.product1:hover img.active{
opacity: 0;
}
.product1:hover img.inactive{
opacity: 1;
}
You could specify a value for the transition-delay property.
In this case, I added a 1s delay to the transition shorthand of .product1 img.active:
Updated Example
.product1 img.active {
transition: all 1s 1s ease-in-out;
opacity: 1;
}
The above is equivalent to:
.product1 img.active{
transition: all 1s ease-in-out;
transition-delay: 1s;
opacity: 1;
}
Make sure you're adding the transition shorthand properties in the correct order.
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;
}
How would I go about hovering over an image that then blurs the background image behind it within css? The way I have it set up now is the background image blurs upon hover.
Here's my css:
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}
.wrapper{
width:900x;
height: 100px;
position: absolute;
top: 2400px;
z-index: 50;
}
.logo{
postion: absolute;
margin: 0 auto;
top: 2420px;
z-index: 50;
left: 400px;
}
html:
<div class="blur"><img src="/homepic1.jpg"></div>//This is the image I want blurred
<div class="wrapper">
<div class="row">
<div class="span12 pagination-centered">
<img src="/transparanetsnu.png">//How do I hover over any of these images to trigger a blur on "homepic1.jpg"
</div>
<div class="span4 offset3">
<div class="box2"><img src="/greek_logo.gif"></div>
</div>
<div class="logo"><img src="/UM-Main-Logo-Maroon.gif">
</div>
I think the best way is to use JQuery. All images and add a class like 'blur' to them everytime user hover over one image, but you should remove the class from the one you don't want.
$('.img1').mouseover(function(){
$('img').addClass('blur');
$('.img1').removeClass('blur');
});
Add the effect using css or javascript.
Use jQuery for that purpose.
First of all dowload jQuery from: http://code.jquery.com/jquery-1.10.2.min.js
Then.
$('.yourImage').mouseover(function(){ //'.yourImage' are the last three images in your case.
$('.homepic1').addClass('blur'); //'.homepic1' is the class of first image in your case
});
.addClass('blur') , Will add the class 'blur' from your CSS to that '.homepic1' element, As soon as your mouse hovers over ANY of the three images.
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.