I'm trying to make hover images and add a link to the div but the div does not fit to page.
For example:
http://test.peterstavrou.com/
See how the image gets cut off?
Anyone have any ideas?
Below is my code.
CSS
#cf {
position:relative;
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;
}
HTML:
<div id="cf"><img class="bottom" src="http://www.peterstavrou.com/wp-content/uploads/2014/11/eBay-Listing-Template-Price.jpg" alt="eBay Template Listing" width="292" height="311" /><img class="top" src="http://www.peterstavrou.com/wp-content/uploads/2014/11/eBay-Listing-Template.jpg" alt="eBay Template Listing" width="292" height="311" /></div>
<strong>Summary:</strong> TEST TEST TEST
<a title="eBay Template Listing" href="http://www.peterstavrou.com/product/ebay-listening-template/">Click here for more information.</a>
jsFiddle http://jsfiddle.net/hz80govj/
the div only contains an image, so it's width/height is derived from that image width/height, which is currently set to width="292" height="311".
If you want the div/image to adjust to screen size, remove the width/height from the image and set image size using css:
img{
max-width: 100%;
}
Your question is not at all clear, But as I understood you need to fit the div to the size of the picture. If I am correct use the following CSS.
#cf {
position:relative;
float:left;
margin:0 auto;
}
.top {
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;
}
.bottom {
position:inherit;
}
Related
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.
I am transitioning a couple of background images. However, I am noticing that when if the user acts before the transition has fully taken affect, the transition is instant.
For example, I hover over the div and the image takes 1 second to completely transition. However, I remove the cursor .5s into the transition. So it transitions back to the original image but instead of smoothly transitioning, it changes instantly. How do I make it smooth at all times?
.class {
width:500px;
height:500px;
background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg");
-webkit-transition: all 1s ease 0;
-moz-transition: all 1s ease 0;
-o-transition: all 1s ease 0;
transition: all 1s ease 0;
}
.class:hover {
background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
<div class="class"></div>
http://codepen.io/john84/pen/vEdPEW
fiddle
I changed ease to ease-in-out
edit: Firefox doesn't support this, but there are many workarounds, example:
fiddle
HTML:
<div class="class"></div>
<div class="class2"></div>
CSS:
.class {
position:absolute;
width:500px;
transition:all 500ms;
height:500px;
background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg");
}
.class2{
width:500px;
height:500px;
background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
.class:hover {
opacity:0;
}
I have 2 divs. When I hover the mouse over one div it expands changing the height. I want to make it display a text with fade in effect somewhere in the screen when I hover the mouse over that div and finally when I click on the div, I want to display another div or text somewhere in the screen again. This is the code I've created so far.
<style>
#container
{
width:212px;
position:fixed;
left:42.5%;
top:21.7%;
border: 0px solid red;
overflow: hidden;
}
#first
{
background-color:#fff;
width:67px;
height:212px;
-webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
-moz-transition:all 1s, -webkit-transform 1s;
-ms-transition:all 1s, -webkit-transform 1s;
-o-transition:all 1s, -webkit-transform 1s;
transition:all 1s, -webkit-transform 1s;
transition:all 1s, transform 1s;
float:left;
}
#first:hover
{
height:354px;
}
#second
{
background-color:#fff;
width:45px;
height:212px;
-webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
-moz-transition:all 1s, -webkit-transform 1s;
-ms-transition:all 1s, -webkit-transform 1s;
-o-transition:all 1s, -webkit-transform 1s;
transition:all 1s, -webkit-transform 1s;
transition:all 1s, transform 1s;
float:left;
margin-left:15px;
}
#second:hover
{
height:354px;
}
</style>
<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
Any ides ? :/
Do you mean something like this?
http://jsfiddle.net/vLz3c/1/
I've created a pargraph inside the #second element, and made that show up while you hover the #second element.
It also increases the height.
EDIT:
http://jsfiddle.net/vLz3c/2/
Now i have used the jQuery function fadeIn when hovering the #second box.
EDIT 2:
http://jsfiddle.net/vLz3c/3/
Now the paragraph also fades out, when you move your mouse away from the #second box
EDIT: 3
As promised, when you click the #second element, the #third element fades in.
http://jsfiddle.net/vLz3c/4/
I have this code that works great. When I pass the mouse over the image it crossfades to another image.
What I want is: when I pass over the mouse the image crossfade and rest like this, I mean, make only 1 transition.
1)image 1
2)onmouseover image 2
3)onmouse out image 2
here my code:
<div id="crossfade">
<img class="bottom" src="images/site3/pasarela1.png" />
<img class="top" src="images/site3/pasarela2.png" />
</div>
here my css code:
#crossfade {
position:relative;
height:250px;
width:400px;
}
#crossfade img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#crossfade img.top:hover {
opacity:0;
}
From what I get is that you want the :hover state to "stick". Though it's not a pure CSS solution, a solid way to handle this is if you are using jquery's .addClass.
$('.yourimage').mouseover(function() { //hover over your image to trigger the event
$(this).addClass('yourAnimationClass'); //add the animation class to the image you hovered over
});
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.