Hey I made a small hover effect but there is a bug in it which I seem not to be able to remove by myself, so hopefully someone can help me :(
[here]https://jsfiddle.net/5a4jh4pc/
this is the hover effect.
The hover width is not arranged to 100% of the image size
The hover effect even starts if you are close to the image on the right side. (it should only do the effect when the mouse is ON the image, not next to it.)
I hope someone can help me here to fix this. Thanks in advance!
You have your container set to a certain size, which the hover effect is triggered over, and the image is set to 70% of this.
This means that you have 30% of the container to the right still activating the hover, but containing no image.
Change the figure width to suit your needs
figure {
display: inline-block;
position: relative;
float: left;
overflow: hidden;
width: 300px;
}
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
font-size: 12px;
line-height: 15px;
}
figure:hover figcaption {
opacity: 1;
}
figure:hover:before {
opacity: 0;
}
.cap-bot img {
float:left;
width:100%;
}
.cap-bot:before { width:0%;padding: 10px 10px;bottom: 10px; }
.cap-bot figcaption { width:100%;padding: 10px 10px;left: 0; bottom: -30%;}
.cap-bot:hover figcaption {width:100%;padding: 10px 10px;bottom: 0; }
Forked https://jsfiddle.net/hjhbrosh/
Remove left and right padding in your figcaption and use word-wrap: break-word; to wrap the text to the next line when it overflows and use a div inside your figcaption to retain that padding.
.cap-bot figcaption {
width:70%;
padding: 10px 0px;
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
width:70%;
padding: 10px 0px;
bottom: 0;
}
Check this fiddle
Related
I am trying to show the caption on my products when you hover. I manage to get it, but the black won't show black, like I have some kind of white background on top of my effect. You can see it there
Here's the CSS I added
.product:hover .reveal img {
opacity: 1;
z-index: 1;
}
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
margin-top: -20px;
}
.reveal:hover .hidden {
z-index: 1;
opacity: 1;
}
.reveal .caption {
position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1) !important;
font: 12px/1.4em sans-serif;
text-transform: uppercase;
letter-spacing: 0.3em;
text-align: center;
}
.reveal .hidden .caption .centered {
display: table-cell;
vertical-align: middle;
}
Do you think it is as basic as a z-index problem, or is it more in the way I constructed it ?
That's because you have an hover effect the animate the .image-wrapper to opacity:0.5. If you set .product-grid .image-wrapper {opacity:1 !important) (just for the test you can see that the black is black.
So what can you do?
Do the fadeOut effect on the .reveal > img. In this way the .product-grid .image-wrapper will stay opacity:1.
try this
.reveal:hover .hidden {
z-index: 0;
opacity: 0.8;
}
One of the problems was the .caption was the same size as the image it was positioned over, and had a 1.0 alpha background- meaning the caption box covered the image entirely once the z-index let it pop in front.
The other problem is the js/jQ doing an animation on rollover. Just nix the code adding the hover handler to it. If you want a fade-in/out still, put the base z-index on your caption to make it naturally be in front, and animate its opacity up to 100% on :hover. This is opposed to animating the opacity of the whole tile from 100% to 50% and switching the stacking order.
.image-wrapper:hover {
opacity: 1 !important;
}
that will fix it. When you hover it goes to 0.5, this will stop it.
How do you animate the text position smoothly. On hover, I want to re-position the text from text-align: center to text-align: left.
From this state:
To this state:
When I change the text-align on a :hover selector, the transition isn't smooth. It just jumps to the left alignment.
div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}
div.subject:hover > div.subjectHeader {
height: 30px !important;
line-height: 30px !important;
font-size: 1.5em !important;
text-align: left !important;
padding-left: 10px !important;
}
Here is the jsfiddle: Link to jsfiddle
The text-align property is not animatable, so CSS transitions will not be applied to it.
One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:
<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>
Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:
div.subject .subjectHeaderInner {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
-moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
left: 0;
margin-left: 0;
}
I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/
Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?
Edit: Slightly better, since the closing animation can't be done with precision (without knowing the text length), I made it simpler but at least it doesn't look that bad.
This is an alternative that works pretty well, almost perfect I would say. The most notable trick is using white-space: nowrap to play with the box dimensions effectively.
HTML layout:
<div>
<h1>
<span>Some Title</span>
</h1>
<p>some cool explanation</p>
<p>more explanation</p>
</div>
CSS that delivers the magic:
div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }
JSFiddle example
I have these two images with corresponding labels: http://jsfiddle.net/Fdjtc/
I want to make it so that when I hover over one of the divs, the image animated downward and the text (initially invisible) animated downward and fades to full opacity, making the images and labels look like they do right now. How can I make sure that the images have enough space upwards to do this, and can I do this kind of animationg using CSS3's transition?
Are you looking for something like this:
http://jsfiddle.net/Fdjtc/9/
There are several ways of doing this. This example is using absolute positioning with transitions on top/bottom.
CSS:
div.wrap > img {
display: block;
position: absolute;
width: 200px;
top: 20px;
left: 20px;
-webkit-transition: top 500ms;
}
div.wrap:hover > img {
top: 5px;
}
div.wrap > span {
display: block;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: bottom 500ms;
}
div.wrap:hover > span {
bottom: 2px;
opacity: 1;
}
Edit: (after your dynamic size request)
This is another way of doing it, using margins. Text caption is a bit of problem here but you will get the idea.
Updated Fiddle: http://jsfiddle.net/Fdjtc/11/
CSS:
div.wrap {
float: left;
text-align: center;
margin: 4px;
border: 1px solid gray;
}
div.wrap > img {
display: block;
text-align: center;
margin: 16px;
-webkit-transition: margin-top 500ms;
}
div.wrap:hover > img {
margin-top: 2px;
}
Based on what you wrote, I've came up with this for you:
http://jsfiddle.net/Fdjtc/6/
I've made quite a noticeable change to your html, too:
<div>
<img src="http://placekitten.com/256">
<span>Label 1</span>
</div>
Hopefully this is what you wanted, if not, please extend your question and be more descriptive.
Is this what you wanted to achieve ?
.box img
{
-webkit-transition:all 0.5s ease-in-out;
height:200px;
display:block;
margin-top:-200px;
}
.box:hover > img
{
margin-top:0px;
}
http://jsfiddle.net/4BtcR/
I am experimenting with using CSS to display genereated content in pseudo-elements.
The hover state does not work correctly. The content generated from the last button appears before the mouse actually hovers over the button if the mouse enters from the bottom. Is there a way to fix this so that the content only appears when the button is hovered over?
Here is a fiddle for the example: http://jsfiddle.net/Ts6qy/
Here is my HTML:
<div class="container">
<span data-title="Number 1">Item 1</span>
<span data-title="Number 2">Item 2</span>
<span data-title="Number 3">Item 3</span>
<span data-title="Number 4">Item 4</span>
</div>
Here is my CSS:
.container {
position: relative;
text-align: center;
padding: 20px 0;
max-width: 420px;
margin: 0 auto;
}
.container span {
display: inline-block;
padding: 2px 6px;
background-color:#78CCD2;
color:#FFFFFF;
border-radius:4px;
margin:3px;
cursor:default;
}
/* Pseudo-elements can even access attributes in their parent elements */
.container span::before {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
content: attr(data-title);
color: #666666;
font-weight:bold;
text-align: left;
opacity: 0;
/*Animate the transistions */
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.container span:hover::before {
opacity: 1;
}
Another approach, to make clearer what is happening:
Add pointer-events: none to the pseudo element:
.container span::before {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
content: attr(data-title);
color: #666666;
font-weight:bold;
text-align: left;
opacity: 0;
/*Animate the transistions */
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: none;
}
And it solves the problem (of course in supporting browsers).
What was happening is that the hover was triggered by the span and also by the pseudo element of the span.
Take a look http://jsfiddle.net/Ts6qy/26/
This width: 100%; has been removed from .container span::before.
So, this way, the before just shows up when hovered it self or when on of those spans is hovered.
I don't know if you really do need what width: 100%; anyway, this method works and you can keep transitions.
I have an animation on my site which goes from width: 100px to 800px when hover on.
But when hover out, it just goes to the normal position with no animation.
How could I get it so the animation would go back on hover-out the same way it came on hover?
I only found solutions for transitions, but I need it for animation.
<div id="blackbox"/>
<div id="blacktxt">
Navigation
</div>
See Here
Why not use transitions instead of animations? Working jsFiddle
#blackbox {
background: black;
width: 100px;
height: 80px;
color: white;
text-align: center;
font-family: Times;
font-size: 20px;
position: fixed;
left: 0px;
bottom: 100px;
opacity: 0.5;
margin-bottom: 10px;
transition: all 2s; /* Add this transition */
}
#blackbox:hover { /* Apply the new design on hover */
opacity: 0.8;
width: 800px;
}
#blacktxt {
margin-top: 10px;
height: 60px;
transition: opacity 0.5s, width 5s;
position: absolute;
font-family: cursive;
cursor: default;
}
#blacktxt:hover {
opacity: 0;
}
I wrote the jQuery Reversible plugin for this. Its main advantage over CSS transitions is that it works on IE9 and older browsers.