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.
Related
I'm currently working on my first site, and I have encountered a problem when trying to create two animations. The element when hovered, moves the text above the image (in this example "Krow Logo"),zooms at the image, and changes its opacity. Great so far.
The problem is, I want a small text to transition in during this animation as well, element h3. This, does not work in all the ways I've tried. I imaged it was a problem with inheritance so I tried to change the parent's properties specifically to its second child. No luck.
I want to preserve overflow:hidden on h2 (Krow Logo) but NOT on h3, since I want h3 to move OUTSIDE of the parent box.
Any hints are greatly appreciated!
I've fiddled around with :nth-child to try and change property overflow:hidden to visible
I've tried creating a grandparent element with position set to relative.
I've tried combinations of + ~ > combinators
None of them works.
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104:first-child {
font-family: 'Raleway', Arial, sans-serif;
position: absolute;
left:20%;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1104 h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1104:hover h2,
figure.snip1104.hover h2 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.snip1104 h3 {
opacity:0;
z-index: 5;
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
padding: 12px 5px;
margin: 0;
top: 110px;
overflow: visible;
}
figure.snip1104:hover h3,
figure.snip1104.hover h3{
opacity:1;
background-color:green;
transform: translateY(200%);
}
HTML
<figure class="snip1104 blue">
<img class="temp" src="/home/it21366/Desktop/liberty/tshirtblue.jpg" alt="sample33"/>
<figcaption>
<h2>Krow <span> Logo</span></h2>
<h3>tesssst</h3>
</figcaption>
</figure>
The effect I wish to occur is for tessst to overflow the parent snip and stay visible despite moving outside of its borders. Instead, h3 disappears (moves to location, but is hidden)
Alright I created an example to show how you might solve just the issue you were having (from my understanding of your question). Basically you create a container for your headings and your image and you control the headings/image based on the hover state of the container.
I have done away with everything not necessary to solving the problem of moving your elements around so you'll have to apply this to your own solution in a way that makes sense (e.g. play with sizing, display: none, whatever you want).
There are also ways to trigger this with JavaScript but I wanted to show a CSS only solution.
If you run the code snippet you should look at it full screen or else it looks bad because I am using view-port units for the page height. Or checkout the codepen and put the editor on the left or right to get more height for the display.
https://codepen.io/zenRyoku/pen/oRdYzB?editors=1100
#import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway', Arial, sans-serif;
}
.page {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: slategray;
}
.main-heading,
.sub-heading {
padding: 2rem;
color: white;
background: rgba(0,0,0,.6);
transition: all 300ms;
text-align: center;
}
.main-heading {
transform: translateY(200%);
}
.sub-heading {
opacity: 0;
}
.container:hover .main-heading {
transform: translateY(0px);
}
.container:hover .sub-heading {
opacity: 1;
transform: translateY(-200%);
}
<div class="page">
<div class="container">
<h2 class="main-heading">Logo</h2>
<img src="https://source.unsplash.com/400x300/?japan,sign"/>
<h3 class="sub-heading">some other text</h3>
</div>
</div>
Not sure that I got what you're trying to achieve, but if overflow is hidden in the parent box, then any content you want to overflow outside of it will be hidden as that is the meaning of overflow: hidden.
If I may ask, what are you trying to target with this?
figure.snip1104:hover h2,
figure.snip1104.hover h2
If mouse on text as hover flickering text.
div {
position: absolute;
font-size: 40px;
color: black
}
.new {
opacity: 0;
visibility:hidden;
}
.old:hover {
opacity: 0;
visibility:hidden;
}
.new:hover {
opacity: 1;
visibility: visible;
}
<div class="old">Old</div>
<div class="new">New</div>
How i can show text New if mouse hover (without wrapper please)?
Code on JSFiddle
You can simply use content along with :after to replace text
div {
position: block;
font-size: 40px;
color: black
}
.old:after{
content:'old';
}
.old:hover:after{
content:'new';
}
<div class="old"></div>
Edited
I think you have been asking that old must disappear on hover and new must stay forever even after hover effects.
This can be done by transition effects. This time I go for Allan Jebaraj's answer using z-index and altering the opacity transition effects.
div {
position: absolute;
font-size: 40px;
color: black
}
.new {
opacity: 0;
transition: opacity 9999s;
}
.old {
z-index: 1;
transition: opacity 9999s;
}
.old:hover {
opacity: 0;
transition: opacity 0s;
}
.old:hover+.new {
opacity: 1;
transition: opacity 0s;
}
<div class="old">old</div>
<div class="new">new</div>
I think this is what you are asking. Set the transition time as large as possible to make sure they don't revert back to normal as user stays.
You can try this
div {
font-size: 40px;
color: black
}
.new {
display: none;
}
.old:hover + .new {
display: block;
}
You have to set the z-index of the class .old and use the adjacent sibling selector to hide the old class and display the .new class.
Refer the JSFiddle below.
JSFiddle link
div {
position: absolute;
font-size: 40px;
color: black
}
.new {
opacity: 0;
}
.old {
z-index: 1;
}
.old:hover {
opacity: 0;
}
.old:hover+.new {
opacity: 1;
}
<div class="old">Old</div>
<div class="new">New</div>
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
I'm trying to write code that shows text over image and I'm trying to achieve an hover effect. I post the code at http://codepen.io/kikibres/pen/LVxmBG so that you can take a look to see how it works. As you can see, when you hover over the image, it darkened, but the text background isn't affected. Likewise, when you hover over the text background, the image effect isn't activated. I wanted to connect them together but how? It looks like that I might have to edit the html, I think?
Html code:
<div class="fourcolumns">
<div class="productpic">
<a href="#">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
<h2 class="captioncolumn"><span>SCUBA</span></h2>
</a>
</div>
</div>
CSS code:
.fourcolumns { width: 100%; position: relative; margin: 40px 0;}
.productpic { width: 25%; float: left; display: inline-block; position: relative; margin: 0; padding: 0; background-color: #000000;}
.productpic a { }
.productpic img { width: 100%; opacity: 1;}
.productpic img:hover { opacity: 0.5;}
.productpic .captioncolumn { width: 80%; /*height: 50px;*/ background-color: #ffffff; position: absolute; top: 20px; left: 0; opacity: 1; padding: 5px 0 5px 20px;}
.productpic .captioncolumn span { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 36px; position: relative; color: #2a286a; opacity: 1; }
.productpic .captioncolumn:hover { opacity: 0.5;}
Use this will help
.productpic img:hover .productpic .captioncolumn,.productpic img { opacity: 0.5;}
It all boils down to a link which ties everything together so that no matter which area of the box are hovered over, it's all activated, instead of one area, when hovered over, showing a hover effect and other areas not showing a hover effect. However, I don't want the text box to be affected in the hover effect. Therefore I looked around for answer for making only the child element activated inside the a parent link. Here's the answer:
.productpic a:hover img { opacity:0.5; }
You can also see the final result at http://codepen.io/kikibres/pen/MwJzqO?editors=110
Okay.As per your comment the suggestion is to use the way-
.productpic img:hover + h2{ background:transparent;}
.productpic img:hover {
opacity: 0.5;
}
link
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/